/* =========================================
   GLOBAL
========================================= */

*{
  box-sizing:border-box;
}

html,
body{

  margin:0;
  padding:0;

  background:var(--bg);

  color:#fff;

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* =========================================
   PAGE SYSTEM
========================================= */

.page{

  position:fixed;

  top:70px;
  left:0;

  width:100%;

  height:calc(100dvh - 70px - 95px);

  overflow-y:auto;

  -webkit-overflow-scrolling:touch;

  opacity:0;

  pointer-events:none;

  transition:opacity .3s ease;
}

.page.active{

  opacity:1;

  pointer-events:auto;
}

/* =========================================
   HOME
========================================= */

#home{

  height:100dvh;

  overflow:hidden;
}


.hero-center-cta{

  position:relative;

  z-index:20;
}


/* =========================================
   BUTTON PREMIUM
========================================= */

.premium-btn{

  position:relative;

  overflow:hidden;

  min-width:260px;

  height:68px;

  border:none;

  border-radius:999px;

  cursor:pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:2px;

  background:
    rgba(4,4,4,.96);

  border:
    1px solid rgba(212,175,55,.28);

  box-shadow:
    0 10px 35px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.03);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


.premium-btn .btn-main{

  color:var(--gold);

  font-size:18px;

  font-weight:800;

  letter-spacing:.08em;
}

.premium-btn .btn-sub{

  color:
    rgba(212,175,55,.72);

  font-size:11px;

  letter-spacing:.08em;
}

/* =========================================
   NAVBAR
========================================= */

.nav-bar{

  position:fixed;

  bottom:0;
  left:0;

  width:100%;

  z-index:900;

  display:flex;

  justify-content:space-around;

  padding:12px 0;

  background:
    rgba(5,5,5,.94);

  border-top:
    1px solid rgba(212,175,55,.08);

  backdrop-filter:blur(18px);

  box-shadow:
    0 -10px 40px rgba(0,0,0,.45);
}

.nav-item{

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:4px;

 color:rgba(255, 255, 255, 0.55);

  transition:.25s ease;
}

.nav-item.active{
  color:#fff;
}

.nav-item svg{

  width:22px;
  height:22px;

  fill:currentColor;
}

.nav-item span{

  font-size:11px;

  letter-spacing:.18em;
}
/* Navigation normale */
.nav-item{
    color:#7f7f7f;
}

/* Icône */
.nav-item svg{
    fill:#7f7f7f;
}

/* Onglet actif */
.nav-item.active{
    color:#D9D9D9 !important;
}

/* Icône active */
.nav-item.active svg{
    fill:#D9D9D9 !important;
}

/* Hover */
.nav-item:hover{
    color:#F2F2F2;
}

.nav-item:hover svg{
    fill:#F2F2F2;
}
/* =========================================
   FOOTER CLOSE
========================================= */

.club-footer-close,
.student-footer-close,
.loyalty-footer-close{

  display:flex;

  align-items:center;
  justify-content:center;

  gap:24px;

  margin-top:30px;

  cursor:pointer;
}

.club-footer-close::before,
.club-footer-close::after,
.student-footer-close::before,
.student-footer-close::after,
.loyalty-footer-close::before,
.loyalty-footer-close::after{

  content:"";

  flex:1;

  height:1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(212,175,55,.28)
    );
}

.club-footer-close::after,
.student-footer-close::after,
.loyalty-footer-close::after{

  background:
    linear-gradient(
      to left,
      transparent,
      rgba(212,175,55,.28)
    );
}

.club-footer-close span,
.student-footer-close span,
.loyalty-footer-close span{

  font-size:13px;

  letter-spacing:5px;

  color:
    rgba(255,255,255,.72);
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:480px){

  .hero-story{

    padding:
      24px 14px
      120px;
  }

  .premium-btn{

    height:54px;

    min-width:220px;
  }

  .club-title,
  .student-card h2,
  #fidelityTitle{

    font-size:34px;
  }

  .club-description{

    font-size:18px;
  }

  .club-btn{

    min-height:90px;

    padding:
      16px 18px;
  }

  .club-btn-title{

    font-size:22px;
  }

  .club-btn-sub{

    font-size:15px;
  }

  #floatingClubBtn{

    bottom:96px;

    height:42px;

    padding:0 14px;

    font-size:13px;
  }
}
#clubModal{
  z-index: 5000;
}

.nav-bar{
  z-index:6000;
}

#clubModal{
  z-index:5000;
}
.hero-story::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at center,
      rgba(0,0,0,.15),
      rgba(0,0,0,.55)
    );
}

.premium-btn{
  box-shadow:
    0 0 0 1px rgba(212,175,55,.15),
    0 10px 35px rgba(0,0,0,.55),
    0 0 25px rgba(212,175,55,.08);
}
.hero-center-cta{
  position:absolute;
  left:50%;
  bottom:160px;
  transform:translateX(-50%);
}
/* =========================================
   HERO PREMIUM ANIMATION
========================================= */
.hero-story{

  position:relative;

  height:100dvh;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    80px 20px
    140px;

  background:#000;
  
}
.hero-story::before{

  content:"";

  position:absolute;

  inset:-2%;

  z-index:0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.30),
      rgba(0,0,0,.58)
    ),
    url("/image/hero-pizza.jpg");

  background-size:cover;
  background-position:center;

  transform:scale(1);

  animation:
    heroCinema 18s ease-in-out infinite alternate;

  will-change:
    transform,
    filter;
}
/* =========================================
   ANIMATIONS
========================================= */

@keyframes heroCinema{

  0%{
    transform:scale(1);
    filter:
      brightness(.92)
      saturate(1);
  }

  100%{
    transform:scale(1.045);
    filter:
      brightness(1)
      saturate(1.08);
  }

}

@keyframes fireGlow{

  0%{
    opacity:.25;
    transform:scale(1);
  }

  100%{
    opacity:.55;
    transform:scale(1.08);
  }

}
@media(max-width:480px){

  .hero-story::before{

   background-size:cover;
    background-position:center 42%;
    background-repeat:no-repeat;

  }

}
/* =========================================
   HERO CONTENT
========================================= */

.hero-content{

  position:relative;

  z-index:10;

  max-width:700px;

  margin:auto;

  text-align:center;

  padding:0 24px;

  transform:translateY(-40px);
}

.hero-kicker{

  display:inline-block;

  margin-bottom:20px;

  padding:8px 18px;

  border:
    1px solid rgba(212,175,55,.24);

  border-radius:999px;

  background:
    rgba(0,0,0,.28);

  backdrop-filter:blur(12px);

  color:rgba(255,255,255,.82);

  font-size:12px;

  letter-spacing:.35em;

  text-transform:uppercase;
}

.hero-title{

  margin:0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:clamp(52px,8vw,92px);

  line-height:.92;

  font-weight:400;

  letter-spacing:.02em;

  color:#fff;

  text-shadow:
    0 10px 30px rgba(0,0,0,.55);
}

.hero-description{

  max-width:620px;

  margin:
    26px auto 0;

  color:
    rgba(255,255,255,.76);

  font-size:18px;

  line-height:1.7;

  letter-spacing:.04em;

  text-shadow:
    0 5px 20px rgba(0,0,0,.5);
}
/* =========================================
   HERO STATUS PREMIUM
========================================= */

.oven-content{

  text-align:center;

  padding:28px 20px 34px;

}

/* 🔥 Haciendo pizzas ahora */

.oven-kicker{

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:12px 22px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(255,140,60,.12),
      rgba(25,12,4,.92)
    );

  border:
    1px solid rgba(255,170,80,.18);

  color:#ffd7a0;

  font-size:18px;

  font-weight:700;

  letter-spacing:.3px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);

}

/* ligne */

.oven-divider{

  width:70px;
  height:2px;

  margin:22px auto;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #d4b15f,
      transparent
    );

}

/* sous texte */

.oven-sub{

  color:#d7d7d7;

  font-size:17px;

  font-weight:500;

  letter-spacing:.2px;

  opacity:.92;

}

/* =========================================
   SECTION TITLE PREMIUM
========================================= */

.section-title{

  position:relative;

  margin-top:55px;
  margin-bottom:10px;

  text-align:center;

  font-size:42px;

  font-weight:900;

  letter-spacing:1px;

  color:#fff;

  text-transform:uppercase;

}

/* glow gold */

.section-title::after{

  content:"";

  display:block;

  width:90px;
  height:3px;

  margin:16px auto 0;

  border-radius:999px;
    background:
    linear-gradient(
        90deg,
        transparent,
        #d8d8d8,
        transparent
    );

}

/* sous titre */

.section-sub,
.section-title + p{

  text-align:center;

  color:#9e9e9e;

  font-size:18px;

  margin-bottom:36px;

  letter-spacing:.2px;

}

/* =========================================
   TYPOGRAPHY
========================================= */

@font-face{
  font-family:"TrajanPro";
  src:url("/fonts/TrajanPro-Regular.otf");
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');

body,
p,
span,
input,
label,
textarea{

  font-family:
  "Montserrat",
  sans-serif !important;

  font-weight:200;
}
.hero-description,
.menu-card p,
.contact-intro,
.section-sub,
.contact-row span,
.club-description,
.oven-sub{

  font-weight:300 !important;
}
.main-btn,
.premium-btn,
.club-btn-title,
.hero-btn,
#confirmOrder{

  font-weight:600 !important;
}
/* =========================================
   TITRES PREMIUM
========================================= */


.club-title,
.club-btn-title,
.hero-title,
.chef-title,
.contact-title,
.nav-item span,
.menu-card h3{

  font-family:
  "TrajanPro",
  serif !important;

  letter-spacing:1.8px;

  font-style:normal !important;
}

/* =========================================
   DESCRIPTION INGREDIENTS
========================================= */

.menu-card .info p{

  font-size:17px !important;

  line-height:1.45 !important;

  font-weight:300 !important;

  color:
  rgba(255,255,255,.82) !important;

  max-width:92%;

  margin:
  10px auto 16px;

  text-align:center;
}

/* mobile */

@media(max-width:768px){

  .menu-card .info p{

    font-size:15px !important;

    line-height:1.42 !important;

    max-width:96%;
  }
}

/* =========================================
   NOM PIZZAS
========================================= */

.menu-card h3{

  font-size:31px !important;

  font-weight:400 !important;

  color:#5fd46f;

  margin-top:8px;

  margin-bottom:10px;

  text-align:center;
}

/* =========================================
   PRIX
========================================= */

.menu-card .price{

  display:block;

  margin-top:6px;

  margin-bottom:18px;

  font-size:24px !important;

  font-weight:300 !important;

  color:#f3f3f3;
}

/* =========================================
   BOUTONS NOIR -> OR AU HOVER
========================================= */

.qty-minus,
.qty-plus{

  width:64px;
  height:64px;

  border-radius:22px;

  border:
  1px solid rgba(198,161,91,.22);

  background:
  linear-gradient(
    180deg,
    rgba(12,12,12,.98),
    rgba(3,3,3,.98)
  );

  color:#000;

  font-family:
  "TrajanPro",
  serif !important;

  font-size:34px;

  font-weight:400;

  transition:
  background .18s ease,
  border .18s ease,
  color .18s ease,
  transform .18s ease;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 30px rgba(0,0,0,.45);
}

/* =========================================
   HOVER PREMIUM
========================================= */

.qty-minus:hover,
.qty-plus:hover{

  transform:translateY(-2px);

  background:
  linear-gradient(
    180deg,
    #000,
    #a88745
  );

  color:#050505;

  border-color:
  rgba(255,230,170,.55);

  box-shadow:
    0 0 20px rgba(198,161,91,.18),
    0 10px 30px rgba(0,0,0,.45);
}

/* =========================================
   CLICK
========================================= */

.qty-minus:active,
.qty-plus:active{

  transform:scale(.96);
}
/* =========================================
   QUANTITÉ
========================================= */

.qty{

  min-width:34px;

  text-align:center;

  font-size:28px !important;

  font-weight:300 !important;

  color:#fff;

  font-family:
  "TrajanPro",
  serif !important;
}



/* =========================================
   SOUS TITRES
========================================= */

.top-location,
.hero-description,
.section-sub,
.contact-intro{

  font-family:
  "Montserrat",
  sans-serif !important;

  font-weight:200 !important;

  letter-spacing:.8px;
}
/* =========================================
   FORCE PREMIUM BUTTONS
========================================= */

.qty-controls button{

  width:64px !important;
  height:64px !important;

  border-radius:22px !important;

  border:
  1px solid rgba(198,161,91,.22) !important;

  background:
  linear-gradient(
    180deg,
    rgba(12,12,12,.98),
    rgba(3,3,3,.98)
  ) !important;

  color:#000 !important;

  font-family:
  "TrajanPro",
  serif !important;

  font-size:34px !important;

  font-weight:400 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 30px rgba(0,0,0,.45) !important;
}

/* hover */

.qty-controls button:hover{

  background:
  linear-gradient(
    180deg,
    #000,
    #a88745
  ) !important;

  color:#050505 !important;
}
/* =========================================
   TOPBAR
========================================= */

.topbar{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:1000;

  height:78px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.88),
      rgba(0,0,0,.35),
      transparent
    );

  backdrop-filter:blur(10px);
}

/* =========================================
   LOGO
========================================= */

.logo{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  transform:translateY(2px);
}

/* PIZZA */

.logo-pizza{

  font-family:
    "Montserrat",
    sans-serif !important;

  font-weight:200 !important;

  font-size:11px;

  letter-spacing:11px;

  text-transform:uppercase;

    color:#d8d8d8;

  margin-bottom:4px;

  padding-left:10px;

  opacity:.9;
}

/* ANGELY */

.logo-angely{

  font-family:
    "TrajanPro",
    serif !important;

  font-size:48px;

  line-height:.82;

  letter-spacing:1px;

  color:#F2EFE9 !important;

  -webkit-text-fill-color:#F2EFE9 !important;

  text-transform:uppercase;

  text-shadow:
    0 2px 10px rgba(0,0,0,.18);
}

/* MOBILE */

@media(max-width:768px){

  .topbar{

    height:64px;
  }

  .logo-pizza{

    font-size:9px;

    letter-spacing:8px;

    margin-bottom:2px;

    padding-left:7px;
  }

  .logo-angely{

    font-size:34px;
  }
}
/* =========================================
   MOBILE FIX MENU CARDS
========================================= */

@media(max-width:768px){

  /* SECTION */

  .section-title{

    font-size:26px !important;

    line-height:1.05;

    margin-top:30px;
  }

  .section-sub{

    font-size:14px !important;

    margin-bottom:22px;
  }

  /* Haciendo pizzas ahora */

  .oven-content{

    padding:18px 14px 20px;
  }

  .oven-kicker{

    font-size:15px !important;

    padding:10px 18px !important;

    border-radius:999px;
  }

  .oven-sub{

    font-size:14px !important;

    opacity:.82;
  }

  .oven-divider{

    margin:16px auto;
  }

  /* GRID */

  .menu-grid{

    grid-template-columns:1fr 1fr !important;

    gap:12px !important;

    padding:0 10px 120px;
  }

  /* CARD */

  .menu-card{

    border-radius:24px !important;

    overflow:hidden;

    min-height:auto !important;
  }

  /* IMAGE */

  .menu-card img{

    width:100%;

    height:140px !important;

    object-fit:cover;

    display:block;
  }

  /* INFO */

  .menu-card .info{

    padding:14px 12px 18px !important;
  }

  /* NOM */

  .menu-card h3{

    font-size:18px !important;

    line-height:1.1;

    margin-bottom:10px;

    letter-spacing:1px;
  }

  /* DESCRIPTION */

  .menu-card .info p{

    font-size:13px !important;

    line-height:1.35 !important;

    max-width:100% !important;

    margin-bottom:12px;

    min-height:92px;
  }

  /* PRIX */

  .menu-card .price{

    font-size:16px !important;

    margin-bottom:14px !important;
  }

  /* CONTROLS */

  .qty-controls{

    gap:10px;

    align-items:center;
  }

  .qty-minus,
  .qty-plus,
  .qty-controls button{

    width:44px !important;
    height:44px !important;

    border-radius:16px !important;

    font-size:26px !important;
  }

  .qty{

    font-size:20px !important;

    min-width:20px;
  }

}
/* ===== HERO SUB BUTTON ===== */

.btn-sub{
  display:block;
  margin-top:4px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(198,161,91,0.72);
  font-weight:500;
}


/* ===== HERO DESCRIPTION ===== */

.hero-description{
  margin-top:22px;
  line-height:1.9;
  font-size:18px;
  color:rgba(255,255,255,0.58);
  font-weight:300;
  letter-spacing:0.3px;
}



/* ===== HERO TITLE ===== */

.hero-title{
  font-size: clamp(42px, 5vw, 72px);

  line-height:0.95;

  letter-spacing:-1px;

  color:#F2EFE9;

  font-weight:500;

  text-shadow:
  0 4px 18px rgba(0,0,0,0.45);

  max-width:900px;

  margin:auto;
}


/* ===== CTA BUTTON ===== */

.hero-btn{
  margin-top:38px;

  background:#050505;

  border:1px solid rgba(250, 250, 250, 0.22);

  border-radius:999px;

  padding:20px 42px;

  transition:all .35s ease;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.35),
  inset 0 0 0 1px rgba(198,161,91,0.04);
}


.hero-btn:hover{

  transform:translateY(-2px);

  border-color:rgba(198,161,91,0.45);

  box-shadow:
  0 14px 38px rgba(0,0,0,0.42),
  0 0 25px rgba(198,161,91,0.08);
}


/* ===== CTA MAIN TEXT ===== */

.btn-main{
  display:block;

  color:#000;

  font-size:24px;

  font-weight:700;

  letter-spacing:1.5px;

  text-transform:uppercase;
}


/* ===== MOBILE ===== */

@media(max-width:768px){

  .hero-title{
    font-size:48px;
    line-height:1.02;
  }

  .hero-description{
    font-size:16px;
    line-height:1.8;
    padding:0 14px;
  }

  .hero-kicker{
    font-size:10px;
    letter-spacing:2.5px;
    padding:8px 18px;
  }

  .hero-btn{
    padding:18px 34px;
  }

  .btn-main{
    font-size:21px;
  }

  .btn-sub{
    font-size:10px;
  }

}
/* =================================
   CONTACT PREMIUM
================================= */

#contacto{

  position:relative;

  padding:
    140px 20px 180px;

  min-height:100vh;

background:
linear-gradient(
rgba(248,248,248,.96),
rgba(255,255,255,.98)
),
url("/image/fire.jpg");

  background-size:cover;
  background-position:center;
 background-attachment:scroll;

  overflow-y:auto;
  overflow-x:hidden;
}

/* glow ambiance */

#contacto::before{

  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top,
      rgba(131, 121, 97, 0.12),
      transparent 60%
    );

  pointer-events:none;
}

/* titre */

#contacto .section-title{

  position:relative;

  z-index:2;

  margin-bottom:18px;

  text-align:center;
}

/* intro */

.contact-intro{

  position:relative;

  z-index:2;

  max-width:700px;

  margin:
    0 auto 60px;

  text-align:center;

  line-height:1.8;

  color:rgba(255,255,255,.72);

  font-size:18px;
}

/* carte premium */



/* boutons */

.contact-buttons{

  display:flex;

  gap:18px;

  margin-bottom:28px;
}

.contact-buttons .main-btn{

  flex:1;
}





/* horaires */

.contact-info{

  color:#000000;
}

.contact-row{

  line-height:2;
}

.contact-row strong{

  display:block;

  margin-top:18px;

  color:#000000;

  letter-spacing:1px;
}

/* texte bas */

.seo-local{

  margin-top:45px;

  text-align:center;

  line-height:1.9;

  color:rgba(255,255,255,.58);
}

/* mobile */

@media(max-width:768px){

  #contacto{

    padding:
      110px 16px 140px;

    background-attachment:scroll;
  }

  .contact-buttons{

    flex-direction:column;
  }



}
/* =================================
   HIDE SCROLLBAR PREMIUM
================================= */

/* Chrome / Edge / Brave */

.page::-webkit-scrollbar,
#contacto::-webkit-scrollbar{

  width:0;
  background:transparent;
}

/* Firefox */

.page,
#contacto{

  scrollbar-width:none;
}

/* IE */

.page,
#contacto{

  -ms-overflow-style:none;
}
html,
body{

  overflow:hidden;
  width:100%;
  max-width:100%;
}

/* container principal */

.page{

  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* évite débordements blur/shadow */

*{

  box-sizing:border-box;
}
body{

  background:#000;
}
/* =================================
   CONTACT BUTTONS PREMIUM
================================= */

.contact-buttons{

  display:flex;
  gap:18px;

  margin-bottom:34px;
}

.contact-buttons .main-btn{

  flex:1;

  position:relative;

  overflow:hidden;

  height:72px;

  border-radius:22px;

  border:
    1px solid rgba(198,161,91,.22);

  background:
    linear-gradient(
      180deg,
      rgba(10,10,10,.98),
      rgba(3,3,3,.98)
    );

  color:#000;

  font-family:
    "TrajanPro",
    serif !important;

  font-size:18px;

  letter-spacing:1.5px;

  text-transform:uppercase;

  transition:
    transform .22s ease,
    border .22s ease,
    box-shadow .22s ease,
    background .22s ease;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 30px rgba(0,0,0,.45);
}

/* hover */

.contact-buttons .main-btn:hover{

  transform:translateY(-2px);

  border-color:
    rgba(198,161,91,.45);

  box-shadow:
    0 0 25px rgba(198,161,91,.10),
    0 12px 34px rgba(0,0,0,.5);
}

/* sous texte */

.contact-buttons .main-btn small{

  display:block;

  margin-top:4px;

  font-size:10px;

  letter-spacing:2px;

  color:
    rgba(198,161,91,.58);
}
/* =========================================
   SLOTS LUXE COMPACT
========================================= */

.slot-btn{

  position:relative;

  min-height:74px;

  padding:10px 12px;

  border-radius:18px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:4px;

  cursor:pointer;

  transition:.18s ease;

  background:
    linear-gradient(
      180deg,
      rgba(12,16,24,.96),
      rgba(6,8,12,.98)
    );

  border:
    1px solid rgba(88,166,255,.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 8px 18px rgba(0,0,0,.28);
}

/* heure */

.slot-btn strong{

  font-size:24px;

  font-weight:800;

  letter-spacing:.3px;

  color:#f5f7ff;

  line-height:1;
}

/* texte discret */

.slot-btn span{

  font-size:11px;

  color:rgba(255,255,255,.34);

  letter-spacing:.2px;
}

/* actif */

.slot-btn.active{

  border-color:
    rgba(212,177,95,.38);

  background:
    linear-gradient(
      180deg,
      rgba(212,177,95,.10),
      rgba(18,14,10,.98)
    );

  box-shadow:
    0 0 0 1px rgba(212,177,95,.12),
    0 0 18px rgba(212,177,95,.08);
}

/* demande forte */

.slot-btn.slot-busy{

  border-color:
    rgba(88,166,255,.16);
}

/* hover */

.slot-btn:hover{

  transform:translateY(-1px);
}
.call-modal-phone{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:26px;
}

.call-modal-phone .btn-primary{
  width:100%;
  justify-content:center;
  font-size:17px;
  height:58px;

  background:
    linear-gradient(
      135deg,
      #5dc9a0,
      #e7cf87
    );

  color:#111;

  border:none;
  border-radius:18px;

  box-shadow:
    0 10px 35px rgba(214,180,90,.18);

  transition:.25s;
}

.call-modal-phone .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 40px rgba(255, 255, 255, 0.25);
}

.call-modal-phone .btn-secondary{
  width:100%;
  height:52px;

  background:transparent;

  border:1px solid rgba(214,180,90,.45);

  color:#c9ab5d;

  border-radius:16px;
}
.call-sub{
  opacity:.7;
  margin-top:8px;
  margin-bottom:26px;
}

.call-recap{
  display:flex;
  flex-direction:column;
  gap:10px;

  margin-bottom:26px;

  text-align:left;
}

.call-line{
  padding:12px 14px;

  border-radius:14px;

  background:
    rgba(255,255,255,.03);

  border:
    1px solid rgba(214,180,90,.08);
}

.call-info{
  opacity:.7;
  line-height:1.7;

  margin-bottom:24px;
}
/* =========================
   MODAL PREMIUM CALL
========================= */

.call-premium{

  padding:40px 28px;
  text-align:center;

}

/* badge */

.call-badge{

  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#f5f3ef;

  margin-bottom:18px;

}

/* titre */

.call-premium h2{

  font-size:42px;
  line-height:1;

  font-weight:700;

  color:#E2C36F;

  margin-bottom:20px;

}

/* texte */

.call-sub{
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.78);
  max-width:320px;
  margin:0 auto 28px;
}

/* recap */

.call-recap{

  display:flex;
  flex-direction:column;
  gap:12px;

  margin-bottom:28px;

}

/* ligne pizza */

.call-line{

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px 22px;

  border-radius:18px;

  background:rgba(255,255,255,0.03);

  border:1px solid rgba(226,195,111,0.10);

 font-size:17px;

}

/* prix */

.call-line strong{

  color:#E2C36F;
  font-weight:700;

}

/* total */

.call-total{
  font-size:28px;
  font-weight:700;
  color:#f3d27a;
  margin-top:10px;
}

/* phrase */

.call-slot{

  font-size:18px;
  line-height:1.4;

  color:rgba(255,255,255,0.65);

  margin-bottom:34px;

}

/* bouton principal */

.call-modal-phone .btn-primary{

  width:100%;

  height:72px;

  border:none;
  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      #E6CB7A,
      #C9A44E
    );

  color:#111;

  font-size:24px;
  font-weight:700;

  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:0.25s;

  box-shadow:
    0 12px 40px rgba(226,195,111,0.22);

}

/* hover */

.call-modal-phone .btn-primary:hover{

  transform:translateY(-2px);

  box-shadow:
    0 18px 50px rgba(226,195,111,0.34);

}

/* bouton retour */

.call-modal-phone .btn-secondary{

  width:100%;

  margin-top:18px;

  height:64px;

  border-radius:20px;

  background:transparent;

  border:1px solid rgba(226,195,111,0.35);

  color:#D8B75B;

  font-size:18px;

}
@media (max-width:768px){

  .contact-buttons{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .contact-buttons .main-btn{
    width:100%;
    max-width:240px;
    margin:auto;
  }

}
.hours-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px 30px;
  margin-top:20px;
}

.hours-grid div:nth-child(odd){
  color:#D8D8D8;
  font-weight:600;
}

.hours-grid div:nth-child(even){
  color:#fff;
}
.contact-premium{
  max-width:700px;
  margin:50px auto;
}

.info-block{
  margin:40px 0;
}

.info-title{
  text-align:center;
  color:#000000;
  letter-spacing:3px;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:30px;
}

.hours-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(198,168,90,.15);
}

.hours-row span:first-child{
  color:#D8D8D8;
  font-weight:600;
}

.hours-row span:last-child{
  color:#fff;
}

.info-text{
  text-align:center;
  line-height:2;
  color:rgba(255,255,255,.85);
}

.info-note{
  text-align:center;
  margin-top:20px;
  font-size:13px;
  opacity:.7;
}

.info-divider{
  width:80px;
  height:1px;
  background:#D8D8D8;
  margin:35px auto;
  opacity:.4;
}


.cake-date-card{

    flex:1;

    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,.98),
            rgba(8,8,8,.98)
        );

    border:1px solid rgba(198,168,90,.18);

    border-radius:18px;

    padding:12px;

    min-height:68px;

    cursor:pointer;

    transition:.25s;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 10px 25px rgba(0,0,0,.30);
}
.form-row{
    margin-bottom:18px;
}
#cakeMessage{
    height:56px;
    resize:none;
}
.field label{
    display:block;
    margin-bottom:6px;
}
#cakeMessage{
    height:56px;
    resize:none;
}
#cakeMessage{
    height:56px;
    resize:none;
}
.field input{
    height:46px;
}
.cake-date-card.selected{
    border-color:#D8D8D8;
}
.cake-date-card:hover{

    transform:translateY(-2px);

    border-color:#D8D8D8;

    box-shadow:
        0 0 18px rgba(198,168,90,.10);
}
.cake-date-title{
    text-align:center;
    font-weight:600;
}

.cake-slots{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.cake-slot-btn{
    flex:1;
}
.form-row{
    display:flex;
    gap:14px;
}

.form-row .field{
    flex:1;
}
.delivery-options{
    display:flex;
    gap:30px;
    margin:14px 0 22px;
}

.radio-option{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-size:18px;
}

.radio-option input{
    margin:0;
}
.cake-slot-btn.active{

    background:#1b1610;

    color:#fff;

    border:2px solid #D8D8D8;

    box-shadow:
        0 0 18px rgba(198,168,90,.18),
        inset 0 1px 0 rgba(255,255,255,.03);

}
.cake-slot-btn{

    cursor:pointer;
    transition:.25s;
    border:1px solid rgba(198,168,90,.20);
    border-radius:10px;
    padding:8px;
    text-align:center;

}

.cake-slot-btn:hover{

    background:#201910;

    border-color:#c6a75a59;

    transform:translateY(-2px);

    box-shadow:
        0 0 14px rgba(198,168,90,.10);

}

.cake-slot-btn.active{
background:#1b1610;
    color:#f8f8f8;
    border-color:#D8D8D8;

}


.cart-photo img{

      width:90px;
    height:90px;

    object-fit:cover;
    border-radius:12px;

}

.cart-item{
    display:flex;
    align-items:center;
    gap:18px;
}

.cart-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
}


.cart-price{

    font-size:15px;
    color:#D8D8D8;
    margin-top:4px;
    opacity:.9;

}
.cart-name{

    font-size:16px;
    font-family:"Cormorant Garamond",serif;
    letter-spacing:1px;

}
.details-btn{

    width:100%;
    height:54px;

    background:transparent;

    border:1.5px solid #D8D8D8;
    border-radius:30px;

    color:#D8D8D8;

    font-size:15px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;

    cursor:pointer;

    transition:.25s;
}

.details-btn:hover{

   background:rgba(198,168,90,.10);

    box-shadow:0 0 18px rgba(198,168,90,.18);

    transform:translateY(-2px);

}

.add-btn:active{

    transform:scale(.98);

}
.product-modal{

position:fixed;

inset:0;

background:#050505;

z-index:99999;

display:none;

overflow:auto;

}

.product-sheet{

max-width:700px;

margin:auto;

padding-bottom:60px;

}

.product-image img{

width:100%;

height:380px;

object-fit:cover;

display:block;

}

.product-content{

padding:30px;

}

.product-content h2{

font-size:42px;

color:#D8D8D8;

text-align:center;

margin-bottom:20px;

}

.product-content p{

text-align:center;

line-height:1.7;

opacity:.8;

}

.product-size{

display:flex;

flex-direction:column;

gap:12px;

margin:35px 0;

}

.size{

padding:18px;

border-radius:18px;

background:#000000;

border:1px solid rgba(198,168,90,.2);

color:white;

display:flex;

justify-content:space-between;

font-size:18px;

cursor:pointer;

}

.size.active{

border-color:#D8D8D8;

}



.close-product{

margin:20px;

background:none;

border:none;

color:white;

font-size:18px;

cursor:pointer;

}
.info-block{

    max-width:650px;

    margin:45px auto;

    text-align:center;

}

.info-block h3{

    color:#D8D8D8;

    font-family:"Trajan Pro", serif;

    font-size:18px;

    letter-spacing:4px;

    margin-bottom:32px;

    text-transform:uppercase;

}

.info-block p{

    color:#cfcfcf;

    font-size:20px;

    line-height:2;

    font-weight:300;

    margin:0;

}
/* ===============================
   LOCATION PREMIUM
================================ */



/* ---------- Note Google ---------- */


.rating-stars{

    color:#D8D8D8;

    font-size:22px;

    letter-spacing:6px;

    margin-bottom:8px;

    text-shadow:
        0 0 12px rgba(198,168,90,.35);

}

.rating-score{

    color:#fff;

    font-size:28px;

    font-weight:600;

    margin-bottom:4px;

}

.rating-text{

    color:rgba(255,255,255,.55);

    font-size:13px;

    letter-spacing:.5px;

}




.rating-stars{

    font-size:28px;
    letter-spacing:5px;

}
.rating-score{

    font-size:56px;
    font-weight:700;
    color:#fff;

}
.rating-text{

    font-size:18px;
    color:#8d8d8d;

}
.pickup-location{

    margin-top:35px;
    line-height:1.7;

}
.pickup-name{

    color:#D8D8D8;
    font-size:22px;
    font-family:"Cormorant Garamond", serif;
    margin:12px 0;

}
.cake-slot-btn strong{
    font-size:18px;
    color:#fff;
}

.cake-slot-btn span{
    font-size:13px;
    color:#b5b5b5;
    margin-top:4px;
}

.cake-slot-btn span{
    font-size:13px;
    color:#b5b5b5;
    margin-top:4px;
}
.payment-loading{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

padding:40px 20px;

gap:20px;

}

.loader{

width:46px;
height:46px;

border:3px solid rgba(198,168,90,.2);

border-top:3px solid #D8D8D8;

border-radius:50%;

animation:spin .8s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}
.checkout-back{
    cursor:pointer;
    color:#c8a24d;
    font-size:15px;
    margin-bottom:18px;
    transition:.2s;
}

.checkout-back:hover{
    color:#e7c36a;
}
.payment-loading{

    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:40px 20px;

    text-align:center;

}

.loader{

    width:42px;
    height:42px;

    border:4px solid rgba(199,162,74,.2);
    border-top-color:#c7a24a;

    border-radius:50%;

    animation:spin .8s linear infinite;

    margin-bottom:18px;

}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}
.payment-method{

    border:2px solid #6b5730;

    background:#181818;

    min-height:82px;

    transition:.25s;
}

.payment-method.active{

    border-color:#d8b45b;

    background:#262116;

    box-shadow:0 0 18px rgba(216,180,91,.25);
}
input,
textarea {
    color: #f3ead2 !important;
    -webkit-text-fill-color: #f3ead2;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{

    -webkit-text-fill-color:#f3ead2 !important;

    caret-color:#f3ead2;

    -webkit-box-shadow:0 0 0 1000px #111 inset !important;

    box-shadow:0 0 0 1000px #111 inset !important;

    transition:background-color 9999s ease-in-out 0s;

}
input,
textarea,
select{

    background:#121212;
    color:#F5F1E8;
    caret-color:#F5F1E8;

}

input::placeholder,
textarea::placeholder{

    color:#8f8f8f;

}
/* Chrome Autofill */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{

    -webkit-box-shadow: 0 0 0 1000px #121212 inset !important;
    -webkit-text-fill-color: #F5F1E8 !important;
    caret-color: #F5F1E8 !important;

    transition: background-color 99999s ease-in-out 0s;

}
.legal-links{

margin-top:60px;

padding-top:40px;

border-top:1px solid rgba(198,168,90,.18);

}

.legal-links h3{

font-family:"Cormorant Garamond",serif;

font-size:34px;

color:#fff;

margin-bottom:24px;

}

.legal-links a{

display:block;

padding:16px 0;

color:#D8D8D8;

text-decoration:none;

font-size:17px;

border-bottom:1px solid rgba(255,255,255,.06);

transition:.25s;

}

.legal-links a:hover{

padding-left:12px;

color:#fff;

}

.map-btn{

background:#0f0f0f;
border:1px solid rgba(198,168,90,.25);
color:#D8D8D8;

}
.map-btn:hover{

background:#D8D8D8;
color:#111;

}


.map-btn{
    position:absolute;
    bottom:18px;
    right:18px;

    padding:12px 20px;

    background:#0f0f0f;
    color:#D8D8D8;

    border:1px solid rgba(198,168,90,.25);
    border-radius:999px;

    text-decoration:none;
    font-weight:600;

    backdrop-filter:blur(10px);
}




.rating-stars{

    font-size:24px;

    letter-spacing:6px;

    color:#D8D8D8;

    margin-bottom:10px;

}

.rating-score{

    font-size:54px;

    font-weight:700;

    color:#fff;

    line-height:1;

}

.rating-text{

    margin-top:10px;

    font-size:15px;

    color:rgba(255,255,255,.55);

}


/* =====================================
   LOCATION PREMIUM V2
===================================== */

.location-card{

    max-width:560px;
    margin:55px auto 0;

    padding:18px;

    background:#050505;

    border:1px solid rgba(198,168,90,.18);

    border-radius:30px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.75);

}

/* ---------- Avis ---------- */

.rating-box{

    text-align:center;

    padding:18px 10px 22px;

}

.rating-stars{

    font-size:24px;

    letter-spacing:6px;

    color:#D8D8D8;

    margin-bottom:10px;

}

.rating-score{

    font-size:54px;

    font-weight:700;

    color:#fff;

    line-height:1;

}

.rating-text{

    margin-top:10px;

    font-size:15px;

    color:rgba(255,255,255,.55);

}

/* ---------- Carte ---------- */

.map-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#000;

}

.map-wrapper iframe{

    display:block;

    width:100%;

    height:200px;

    border:0;

}

/* léger fondu noir */

.map-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.45),
            transparent 35%
        );

}






/* ===============================
   CTA
=============================== */

.hero-btn,
.premium-btn,
.main-btn,
.contact-buttons .main-btn,
.details-btn{

    background:#050505 !important;

    border:1px solid rgba(255,255,255,.18) !important;

    color:#fff !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.03);

}

.hero-btn:hover,
.premium-btn:hover,
.main-btn:hover,
.contact-buttons .main-btn:hover,
.details-btn:hover{

    background:#fff !important;

    color:#000 !important;

    border-color:#000000 !important;

    box-shadow:
        0 0 24px rgba(255,255,255,.12);

}

.btn-main{

    color:#fff !important;

}

.btn-sub{

    color:rgba(255,255,255,.62) !important;

}

/* ===============================
   CARTES PRODUITS
=============================== */

.menu-card{

    background:#fff !important;

    border:1px solid #ECECEC !important;

}

.menu-card h3{

    color:#f3f2f2 !important;

}

.menu-card p{

    color:#ffffff !important;

}

.menu-card .price{

    color:#eeecec !important;

}

/* ===============================
   OPTIONS
=============================== */

.size{

    background:#fff;

    color:#000;

    border:1px solid #DDD;

}

.size.active{

    border-color:#111;

    box-shadow:
        0 0 18px rgba(0,0,0,.08);

}

/* ===============================
   ICONES
=============================== */

svg{

    color:#666;

}

/* ===============================
   TITRES
=============================== */

.section-title,
.product-content h2,
.pickup-name,
.info-block h3{

    color:#fff !important;

}

/* ===============================
   LIGNES
=============================== */

.section-title::after,
.info-divider{

    background:
        linear-gradient(
            90deg,
            transparent,
            #D8D8D8,
            transparent
        ) !important;

}

/* ===============================
   NAVIGATION
=============================== */

.nav-item{

    color:rgba(255,255,255,.55);

}

.nav-item.active{

    color:#796464;

}

/* ===============================
   LIENS
=============================== */

a{

    color:#fff;

}

a:hover{

    color:#000000;

}

/* ===============================
   GOOGLE
=============================== */

.rating-stars{

    color:#fff;

}
/* ===== CONTACT PAGE WHITE ===== */

#contacto .section-title,
#contacto .contact-intro,
#contacto .info-block h3,
#contacto .info-block p,
#contacto .info-title,
#contacto .hours-row span,
#contacto .seo-local{

    color:#111 !important;

}

#contacto .info-divider{

    background:
        linear-gradient(
            90deg,
            transparent,
            #444,
            transparent
        ) !important;

}
/* =========================================
   PRODUCT PAGE WHITE
========================================= */

.product-modal{
    background:#f8f8f6 !important;
}

.product-sheet{
    background:#f8f8f6 !important;
}

.product-layout{
    background:#f8f8f6 !important;
}

.product-right{
    background:#f8f8f6 !important;
}

.product-content{
    background:#f8f8f6 !important;
}

.product-right h1,
#productTitle{
    color:#111 !important;
}

.product-right p,
#productDescription{
    color:#555 !important;
}

.close-product{
    color:#111 !important;
}
/* =========================================
   PRODUCT PAGE WHITE
========================================= */

.product-modal{
    background:#f8f8f6 !important;
}

.product-sheet{
    background:#f8f8f6 !important;
}

.product-layout{
    background:#f8f8f6 !important;
}

.product-right{
    background:#f8f8f6 !important;
}

.product-content{
    background:#f8f8f6 !important;
}

.product-right h1,
#productTitle{
    color:#111 !important;
}

.product-right p,
#productDescription{
    color:#555 !important;
}

.close-product{
    color:#111 !important;
}
/* ===========================
   PAGE COLLECTION BLANCHE
=========================== */

#menu{
    background:#f8f8f6 !important;
}

#menu.page{
    background:#f8f8f6 !important;
}

.menu-grid{
    background:#f8f8f6 !important;
}

.section-title{
    color:#111 !important;
}

.section-sub,
#menu p{
    color:#666 !important;
}
#menu .section-title + p{
    color:#000000 !important;
    opacity:1 !important;
    
}
.hero-btn:hover,
.premium-btn:hover,
.main-btn:hover{

    background:#fff !important;
    color:#111 !important;

}

.hero-btn:hover .btn-main,
.premium-btn:hover .btn-main,
.main-btn:hover .btn-main{

    color:#111 !important;

}

.hero-btn:hover .btn-sub,
.premium-btn:hover .btn-sub,
.main-btn:hover .btn-sub{

    color:#555 !important;

}
/* ==========================
   OPTIONS PRODUIT
========================== */

.product-size .size{

    background:#111 !important;
    color:#fff !important;

    border:1px solid rgba(255,255,255,.15) !important;

}

.product-size .size span,
.product-size .size strong{

    color:#fff !important;

}

/* OPTION SÉLECTIONNÉE */

.product-size .size.active,
.product-size .size.selected{

    background:#fff !important;

    color:#111 !important;

    border:1px solid #111 !important;

}

.product-size .size.active span,
.product-size .size.active strong,
.product-size .size.selected span,
.product-size .size.selected strong{

    color:#111 !important;

}

/* HOVER */

.product-size .size:hover{

    border-color:#d8d8d8 !important;

}
#productDescription{

    font-size:22px !important;

    line-height:1.8 !important;

    color:#555 !important;

    opacity:1 !important;

}
#menu .section-title + p{

    max-width:none !important;

    width:100%;

    white-space:nowrap;

    text-align:center;

    font-size:20px;

}
.cart-title,
.cart-header h2,
.cart-header h3,
#cartTitle{
    color:#fff !important;
}
/* ======================================
   FOOTER LEGAL - CASA ANGELY
====================================== */

.footer-legal h3,
.footer-legal-title,
.footer-links-title{
    color:#111 !important;
}

.footer-legal a,
.footer-legal-links a,
.footer-links a{
    color:#111 !important;
}

.footer-legal a:hover,
.footer-legal-links a:hover,
.footer-links a:hover{
    color:#666 !important;
}
.menu-card{
    display:flex;
    flex-direction:column;
}

.menu-card .info{
    display:flex;
    flex-direction:column;
    flex:1;
}

.product-actions{
    margin-top:auto;
}