:root{
  --maxw:960px;
  --gap:16px;
  --ink:#111827;
  --muted:#6b7280;
  --brand:#1f2937;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:#f7f7f7;line-height:1.5;}

/* Header / Navigation */
header{background:#333;color:#fff;}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);}
.logo h1{font-size:clamp(20px,4vw,28px);margin:0;}
.nav-toggle{appearance:none;border:1px solid #e5e7eb;background:#fff;color:#111;padding:8px 12px;border-radius:10px;cursor:pointer;}
nav ul{list-style:none;margin:12px 0 0 0;padding:0;display:none;flex-direction:column;gap:10px;}
nav a{text-decoration:none;color:#fff;font-weight:600;}
nav.open ul{display:flex;}
@media(min-width:768px){
  .nav-toggle{display:none;}
  nav ul{display:flex!important;flex-direction:row;gap:20px;margin:0;}
  nav a{color:#fff;}
}

/* Hero */
#hero{
  background:url('emma-49.jpg') center/cover no-repeat;
  color:#fff;
  min-height:55vh;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  text-align:right;
  padding:24px 16px;
  position:relative;
}
#hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.3);}
#hero>*{position:relative;z-index:1;}
#hero h2{font-size:clamp(22px,6vw,40px);margin-bottom:8px;}
#hero p{margin-bottom:16px;}
.cta-button{background:#111827;color:#fff;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700;}

#low-stock {
  display: none;
  margin: 30px auto 0;
  max-width: 600px;
  padding: 10px 10px;
  border-radius: 14px;
  background: linear-gradient(135deg,#fff0e1,#ffd9b3);
  border: 2px solid #ff8c00;
  color: #9a3412;
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

#no-stock-msg {
  display: none;
  margin: 30px auto 0;
  max-width: 600px;
  padding: 10px 10px;
  border-radius: 14px;
  background: #e27d52;
  border: 2px solid #9a3412;
  color: #9a3412;
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.cta-button.disabled {
  pointer-events: none;      /* empêche le clic */
  background: #aaa;          /* couleur grise */
  color: #f8f8f8;
  cursor: not-allowed;
  opacity: 0.8;
}

/* Counter widget */
.wrap{max-width:720px;margin:16px auto;padding:0 8px;}
.card{background:#fff;border-radius:16px;padding:16px;border:1px solid #e5e7eb;box-shadow:0 2px 4px rgba(0,0,0,.05);}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px;}
.bar{height:10px;background:#eee;border-radius:999px;overflow:hidden;margin:12px 0;}
.bar>div{height:100%;background:#22c55e;width:0%;}
.help{color:var(--muted);}
.stat .n{font-size:clamp(28px,8vw,40px);font-weight:800;}
.toast{margin-top:10px;padding:10px 14px;border-radius:10px;display:none;}
.toast.ok{background:#dcfce7;border:1px solid #86efac;}
.toast.err{background:#fee2e2;border:1px solid #fca5a5;}

/* Features */
#features{background:#f1f1f1;padding:32px 16px;text-align:center;}
#features .grid{display:grid;gap:16px;grid-template-columns:1fr;}
.feature{background:#fff;padding:16px;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.05);}
@media(min-width:768px){#features .grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){#features .grid{grid-template-columns:repeat(3,1fr);}}

/* Contact & Footer */
#contact{padding:32px 16px;text-align:center;}
footer{background:#333;color:#fff;text-align:center;padding:20px;}
.container{max-width:var(--maxw);margin:0 auto;}