:root{
  --wine:#7a1234;
  --wine-dark:#6b0f2e;
  --gold:#c9a45c;
  --cream:#fbf6f2;
  --ink:#5a1a30;
  --muted:#6f5560;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:"Tajawal",system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
 
}

/* ---------- Header ---------- */
.topbar{
  direction:ltr;
  display:flex;align-items:center;justify-content:space-between;
  height:115px;padding:0 50px;
  background:#fff;
  box-shadow:0 2px 10px rgba(90,26,48,.08);
  position:relative;z-index:5;
}
.icon-btn{background:none;border:0;color:var(--wine);cursor:pointer;display:grid;place-items:center}
.icon-btn--round{width:46px;height:46px;border:1.5px solid var(--wine);border-radius:50%}
.icon-btn:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- Logo (texte calligraphique, à remplacer par votre SVG/PNG) ---------- */
.logo{
  font-family:"Aref Ruqaa",serif;font-weight:700;
  color:var(--wine);text-decoration:none;text-align:center;
  line-height:.85;display:block;
}
.logo--sm{display:block;height:84px}
.logo--sm img{height:100%;width:auto;display:block}
.logo--lg{height:150px;width:auto;margin:0 auto 14px}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:calc(100vh - 115px);
  padding:0 0 130px;
  background:
    radial-gradient(ellipse at 50% 30%,#fff 0%,rgba(255,255,255,0) 60%),
    linear-gradient(#f7efe9,#f4e9e2);
  display:flex;flex-direction:column;align-items:center;
}
/*
.hero::before,.hero::after{ /* motif géométrique discret dans les coins
  content:"";position:absolute;top:0;width:24%;height:45%;opacity:.35;
  background:
    repeating-linear-gradient(60deg,transparent 0 22px,rgba(201,164,92,.35) 22px 23px),
    repeating-linear-gradient(-60deg,transparent 0 22px,rgba(201,164,92,.35) 22px 23px);
}
.hero::before{left:0}
.hero::after{right:0}
 */
/* Arche centrale */
.arch{
  position:relative;z-index:2;
  width:min(720px,100%);
  margin-top:0;
  
  text-align:center;
 /* background:linear-gradient(#fff,rgba(255,255,255,.55));
  border-radius:38% 38% 30px 30px / 18% 18% 30px 30px;
  box-shadow:0 0 60px rgba(255,255,255,.9) inset;*/
}
/*.silhouette{
  position:absolute;inset:6% 18% 40%;z-index:-1;opacity:.22;filter:blur(10px);
  background:
    radial-gradient(ellipse 30% 45% at 32% 55%,#3b3b45 60%,transparent 62%),
    radial-gradient(ellipse 30% 55% at 68% 50%,#3b3b45 60%,transparent 62%);
}*/

h1{font-size:clamp(34px,5vw,58px);font-weight:800;line-height:1.3;color:var(--wine-dark)}
.sub{font-size:clamp(22px,3vw,34px);font-weight:500;color:var(--muted);margin-top:6px}

/* Boutons */
.cta{display:flex;justify-content:center;gap:20px;margin-top:34px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-width:265px;height:62px;padding:0 24px;
  border-radius:12px;font:600 19px "Tajawal",sans-serif;text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn--fill{background:var(--wine);color:#fff;box-shadow:0 8px 18px rgba(122,18,52,.28)}
.btn--line{background:#fff;color:var(--ink);border:1.5px solid var(--wine);box-shadow:0 4px 12px rgba(90,26,48,.08)}
.btn-ic{width:40px;height:40px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center}

/* Avantages */
.perks{
  list-style:none;display:flex;justify-content:center;flex-wrap:wrap;
  margin-top:26px;font-size:16px;font-weight:500;color:var(--ink);
}
.perks li{display:flex;align-items:center;gap:8px;padding:0 16px}
.perks li+li{border-right:1px solid #cdbcc0}
.perks li::before{
  content:"✓";width:20px;height:20px;border-radius:50%;
  background:var(--wine-dark);color:#fff;font-size:12px;display:grid;place-items:center;
}

/* Statistiques */
.stats{
  display:flex;justify-content:space-around;align-items:center;gap:10px;
  margin:26px auto 0;padding:16px 20px;max-width:680px;
  background:rgba(255,255,255,.75);border:1px solid #eee2dd;border-radius:16px;
  box-shadow:0 6px 18px rgba(90,26,48,.06);
}
.stat{display:flex;align-items:center;gap:14px;color:var(--wine)}
.stat+.stat{border-right:1px solid #e6d9d4;padding-right:24px}
.stat div{display:flex;flex-direction:column;text-align:center;line-height:1.3}
.stat strong{font-size:23px;font-weight:700;color:var(--ink);direction:ltr}
.stat span{font-size:16px;color:var(--muted)}

/* ---------- Décors (images extraites de la maquette) ---------- */
.deco{position:absolute;z-index:1;pointer-events:none;top:0;height:auto;max-height:100%}
.deco--left{left:0;width:min(30%,440px)}
.deco--right{right:0;width:min(30%,440px);top:auto;bottom:120px;max-height:none}

/* ---------- Bandeau bordeaux ---------- */
.wave{
  position:absolute;left:0;right:0;bottom:0;z-index:3;height:120px;
  background:var(--wine-dark);
  border-top:3px solid var(--gold);
  border-radius:50% 50% 0 0 / 40px 40px 0 0;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;
}
.wave p{color:var(--gold);font-size:22px;font-weight:500;text-align:center;padding:0 16px}
.medal{
  position:absolute;top:-34px;left:50%;transform:translateX(-50%);
  width:96px;height:64px;border-radius:96px 96px 0 0;
  background:#fff;border:3px solid var(--gold);border-bottom:0;
  display:grid;place-items:center;color:var(--gold);font-size:28px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .deco,.hero::before,.hero::after{opacity:.4}
  .deco--left,.deco--right{width:44%}
  .logo--sm{height:64px}
  .logo--lg{height:110px}
  .topbar{padding:0 20px;height:90px}
  .stats{flex-direction:column;align-items:stretch}
  .stat{justify-content:center}
  .stat+.stat{border-right:0;padding-right:0;border-top:1px solid #e6d9d4;padding-top:10px}
  .perks li+li{border-right:0}
  .wave p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ---------- Menu latéral ---------- */
.no-scroll{overflow:hidden}
.overlay{position:fixed;inset:0;background:rgba(60,10,28,.45);z-index:20}
.overlay[hidden]{display:none}
.drawer{
  position:fixed;top:0;bottom:0;left:0;z-index:30;
  width:min(340px,86vw);padding:22px 26px 30px;
  background:#fff;box-shadow:6px 0 30px rgba(60,10,28,.25);
  display:flex;flex-direction:column;
  transform:translateX(-105%);visibility:hidden;
  transition:transform .3s ease,visibility 0s .3s;
}
.drawer.open{transform:none;visibility:visible;transition:transform .3s ease}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #eee2dd}
.drawer-head img{height:64px;width:auto}
.drawer ul{list-style:none;margin:14px 0 auto}
.drawer li a{
  display:block;padding:15px 8px;font-size:19px;font-weight:500;
  color:var(--ink);text-decoration:none;border-bottom:1px solid #f3eae6;
  transition:color .15s,padding .15s;
}
.drawer li a:hover,.drawer li a:focus-visible{color:var(--wine);padding-right:16px;outline:0}
.drawer-cta{min-width:0;width:100%;margin-top:24px}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}

#order-form{
  width: 90%;
  border:2px solid #7a1234;
  margin: 40px auto;
  padding: 20px;
}
.form-title span {
  text-align: center;
  display: block;
}

.form-title .title{
font-weight: bold;
font-size: 13px;
}
.form-title .number{
  display: block;
  width:35px;
  height: 35px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 22px;
  line-height: 30px;
  margin: 0 auto;
  
}

.form-title .col-md-2{
padding: 5px;
  text-align: center;
  border: 1px solid #7a1234 !important;
  border-radius: 10px;
  margin-right: 2px;
}

.form-title .active {
  background-color: #7a1234;
  border-radius: 10px;
  
}
.form-title .active .number{
  color:white;
  margin: 0 auto;
}
.form-title .active .title{
  color:white;
}
#order-form label {
  display: block;
  margin-bottom: 5px;
}
#order-form input[type="text"].form-control-sm,#order-form input[type="number"].form-control-sm,
#order-form input[type="date"].form-control-sm,#order-form select,#order-form textarea{
   background-color: #fdf8ef;

}
.form-pagination a {
   display: block;
   text-decoration: none;
   text-align: center;
   background-color:#7a1234;
   color: white;
   font-size: 15px;
   padding: 8px;
   border-radius: 5px;
}

#new_order_btn .col-md-6 {
   text-align: center;
}
#new_order_btn a {
  display: block;
  background-color:#7a1234 ;
  color: white;
  text-decoration: none;
  padding: 8px;
  width: 80%;
  border-radius: 5px;
  margin: 0 auto;
}


table.orders th{
  background-color: #7a1234;
  color: white;
  font-size: 12px;
}