/* =========================================
   PIZZA ANGELY — PREMIUM CLEAN CSS
========================================= */

/* =========================================
   ROOT
========================================= */

:root{

  --bg:#050505;

  --gold:#D4AF37;
  --gold-light:#F3D57A;
  --gold-dark:#9F7324;

  --white:#f5f1e8;

  --text:rgba(255,255,255,.82);

  --text-soft:rgba(255,255,255,.62);

  --line:rgba(212,175,55,.16);

  --card:
    linear-gradient(
      180deg,
      rgba(10,10,10,.92),
      rgba(5,5,5,.96)
    );

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

  --glow:
    0 0 30px rgba(212,175,55,.10);

  --radius:34px;
}

/* =========================================
   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:hover{

  transform:translateY(-2px);

  border-color:
    rgba(212,175,55,.5);

  box-shadow:
    0 0 28px rgba(212,175,55,.12),
    0 10px 35px rgba(0,0,0,.55);
}

.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(212,175,55,.68);

  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;
}

/* =========================================
   CLUB / CARDS
========================================= */

.premium-club,
.student-card,
.loyalty-card,
.loyalty-login{

  position:relative;

  overflow:hidden;

  width:min(92vw,420px);

  margin:auto;

  padding:
    42px 28px
    32px;

  border-radius:38px;

  background:var(--card);

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

  backdrop-filter:blur(20px);

  box-shadow:
    var(--shadow),
    var(--glow);

  text-align:center;
}

.premium-club::before,
.student-card::before,
.loyalty-card::before,
.loyalty-login::before{

  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at top,
      rgba(212,175,55,.08),
      transparent 60%
    );
}

/* =========================================
   TITLES
========================================= */

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

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:52px;

  line-height:.95;

  font-weight:400;

  letter-spacing:.05em;

  color:var(--white);

  margin-bottom:18px;
}

.club-description{

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:28px;

  line-height:1.1;

  letter-spacing:.12em;

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

  margin-bottom:30px;
}

/* =========================================
   CLUB BUTTONS
========================================= */

.club-actions{

  display:flex;

  flex-direction:column;

  gap:18px;
}

.club-btn{

  display:flex;

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

  min-height:98px;

  padding:
    20px 22px;

  border-radius:28px;

  background:
    rgba(8,8,8,.92);

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

  backdrop-filter:blur(18px);

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

.club-btn:hover{

  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #f4d87f,
      #c99f50
    );

  box-shadow:
    0 0 40px rgba(212,175,55,.20);
}

.club-btn-left{

  display:flex;

  align-items:center;

  gap:18px;
}

.club-btn-title{

  font-family:
    "Cinzel",
    serif;

  font-size:28px;

  letter-spacing:3px;

  color:var(--gold);
}

.club-btn-sub{

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:18px;

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

/* =========================================
   QR FIX
========================================= */

.qr-container{

  display:flex;

  justify-content:center;

  align-items:center;

  margin:
    20px auto;
}

#studentQR,
#qrcode{

  display:flex;

  justify-content:center;

  align-items:center;

  min-height:190px;
}

#studentQR canvas,
#studentQR img,
#qrcode canvas,
#qrcode img{

  width:170px !important;
  height:170px !important;

  background:#fff;

  padding:10px;

  border-radius:18px;
}

/* =========================================
   FLOATING CLUB BUTTON
========================================= */

#floatingClubBtn{

  position:fixed;

  top:78px;
 right:14px;

  z-index:999999999;

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

  gap:8px;

  height:42px;

  padding:0 16px;

  border:none;

  border-radius:999px;

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

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

  backdrop-filter:blur(18px);

  color:var(--gold);

  font-size:13px;

  font-weight:700;

  white-space:nowrap;

  cursor:pointer;

  box-shadow:
    0 8px 25px rgba(0,0,0,.35);

  opacity:1;
  visibility:visible;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}
#floatingClubBtn{

  background:
    rgba(8,8,8,.58);

  backdrop-filter:blur(20px);

  border:
    1px solid rgba(212,175,55,.18);
}
#floatingClubBtn:hover{

  transform:translateY(-2px);

  background:
    rgba(10,10,10,.82);

  border-color:
    rgba(212,175,55,.45);
}

#floatingClubBtn svg{

  width:16px;
  height:16px;

  fill:var(--gold);

  flex-shrink:0;
}
/* =========================================
   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,
      #d4b15f,
      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:#d4b15f;

  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:#C6A15B;

  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,
    #C6A15B,
    #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:#C6A15B !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,
    #C6A15B,
    #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:#C6A15B;

  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(198,161,91,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:#C6A15B;

  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(0,0,0,.78),
      rgba(0,0,0,.94)
    ),
    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(198,168,90,.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 */

.contact-card{

  position:relative;

  z-index:2;

  max-width:820px;

  margin:auto;

  padding:30px;

  border-radius:32px;

  background:
    rgba(10,10,10,.72);

  backdrop-filter:blur(14px);

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

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

/* boutons */

.contact-buttons{

  display:flex;

  gap:18px;

  margin-bottom:28px;
}

.contact-buttons .main-btn{

  flex:1;
}

/* map */

.map-wrapper{

  position:relative;

  overflow:hidden;

  border-radius:24px;

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

  margin-bottom:35px;
}

.map-wrapper iframe{

  width:100%;
  height:320px;

  border:none;

  filter:
    saturate(.75)
    contrast(1.05);
}

/* horaires */

.contact-info{

  color:#fff;
}

.contact-row{

  line-height:2;
}

.contact-row strong{

  display:block;

  margin-top:18px;

  color:#C6A85A;

  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;
  }

  .contact-card{

    padding:22px;
  }

  .map-wrapper iframe{

    height:260px;
  }

}
/* =================================
   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:#C6A15B;

  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,
      #c9ab5d,
      #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(214,180,90,.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:#E2C36F;

  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:#C6A85A;
  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:#C6A85A;
  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:#C6A85A;
  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:#C6A85A;
  margin:35px auto;
  opacity:.4;
}
.cake-row{
    display:flex;
    gap:14px;
    margin-bottom:10px;
}

.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:#C6A85A;
}
.cake-date-card:hover{

    transform:translateY(-2px);

    border-color:#C6A85A;

    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 #C6A85A;

    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:#C6A85A;

}


.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:#C6A85A;
    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 #C6A85A;
    border-radius:30px;

    color:#C6A85A;

    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:#C6A85A;

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:#111;

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:#C6A85A;

}



.close-product{

margin:20px;

background:none;

border:none;

color:white;

font-size:18px;

cursor:pointer;

}