:root{
  --ink:#1f2a24;
  --sage:#7c9885;
  --sage-dark:#4f6a58;
  --sand:#efe9dc;
  --sand-light:#fbf9f3;
  --white:#fffdf8;
  --gold:#c9a66b;
  --tag:#c97b63;
  --line:#e2dcc9;
  --muted:#8a8578;
}

/* Redéfinit les variables elles-mêmes (pas juste des sélecteurs isolés) :
   tout usage de var(--ink)/var(--muted)/etc. dans TOUT le fichier devient
   automatiquement lisible en mode sombre, sans avoir à patcher chaque
   sélecteur un par un (c'était la cause du bug sur .pm-desc, resté en
   texte sombre sur fond sombre). */
@media (prefers-color-scheme: dark) {
  :root{
    --ink:#f0f0f0;
    --muted:#a8a49a;
    --line:rgba(255,255,255,.12);
    --sand:#1f1f1f;
    --sand-light:#151515;
    --white:#1a1a1a;
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sand-light);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
}
strong, b, .card-name, .brand{font-weight:700;}
.container{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:20;
  background:var(--sand-light);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;max-width:1080px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:8px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;font-weight:800;font-size:20px;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--sage);display:inline-block;}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:500;}
.nav-links a:hover{color:var(--sage-dark);}
.nav-right{display:flex;align-items:center;gap:18px;}
.saved-pill{
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:12.5px;display:flex;gap:6px;align-items:baseline;
}
.saved-pill b{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;font-weight:700;color:var(--sage-dark);font-size:14px;}
.cart-link{
  position:relative;background:var(--ink);color:var(--white);
  border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:600;
}
.cart-count{
  position:absolute;top:-7px;right:-7px;background:var(--tag);color:white;
  border-radius:50%;width:19px;height:19px;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Buttons ---------- */
button, .btn{
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;
  border:none;border-radius:10px;padding:12px 20px;cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;display:inline-block;
}
button:active{transform:scale(0.97);}
.btn-primary{background:var(--ink);color:var(--white);}
.btn-primary:hover{opacity:0.88;}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--sand);}
.btn-sage{background:var(--sage);color:white;}
.btn-block{width:100%;text-align:center;}

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 48px;border-bottom:1px solid var(--line);
}
.hero .eyebrow{
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--sage-dark);font-weight:600;margin-bottom:14px;display:block;
}
.hero h1{font-size:clamp(34px,5.5vw,54px);max-width:640px;line-height:1.08;}
.hero p{max-width:480px;color:var(--muted);font-size:16px;line-height:1.6;margin-top:16px;}
.hero-actions{margin-top:28px;display:flex;gap:12px;}

/* ---------- Category chips ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap;padding:28px 0;}
.chip{
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:13.5px;font-weight:500;cursor:pointer;
}
.chip.active{background:var(--ink);color:var(--white);border-color:var(--ink);}

/* ---------- Product grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;padding:8px 0 56px;
}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;
}
.card-media{
  aspect-ratio:1/1;background:var(--sand);display:flex;align-items:center;
  justify-content:center;font-size:44px;position:relative;
}
.card-tag{
  position:absolute;top:10px;left:10px;background:var(--tag);color:white;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  padding:4px 8px;border-radius:6px;
}
.card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card-cat{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}
.card-name{font-size:14.5px;font-weight:600;line-height:1.3;}
.card-price-row{display:flex;align-items:baseline;gap:8px;margin-top:2px;}
.card-price{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;font-weight:700;font-size:18px;}
.card-old{font-size:12.5px;color:var(--muted);text-decoration:line-through;}
.card-add{margin-top:auto;padding-top:10px;}
.card-add button{width:100%;font-size:13px;padding:10px;}

/* ---------- Cart page ---------- */
.cart-row{
  display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);
}
.cart-emoji{
  width:64px;height:64px;background:var(--sand);border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;
}
.cart-info{flex:1;}
.cart-info .name{font-weight:600;font-size:15px;}
.cart-info .cat{font-size:12px;color:var(--muted);margin-top:2px;}
.qty-controls{display:flex;align-items:center;gap:10px;}
.qty-controls button{
  width:28px;height:28px;padding:0;border-radius:8px;background:var(--sand);color:var(--ink);
  font-size:15px;line-height:1;
}
.cart-price{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;font-weight:700;font-size:16px;width:80px;text-align:right;}
.remove-x{
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  color:var(--muted);cursor:pointer;font-size:12.5px;padding:6px 12px;
}
.remove-x:hover{border-color:var(--tag);color:var(--tag);}

.summary-box{
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px;
}
.summary-row{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--muted);}
.summary-total{
  display:flex;justify-content:space-between;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;font-weight:700;font-size:22px;
  padding-top:14px;margin-top:8px;border-top:1px solid var(--line);
}
.empty-state{
  text-align:center;padding:70px 20px;color:var(--muted);
}
.empty-state .big{font-size:40px;margin-bottom:14px;}

/* ---------- Checkout ---------- */
.checkout-wrap{max-width:520px;margin:0 auto;padding:56px 24px 80px;}
.step-track{display:flex;gap:8px;margin-bottom:32px;}
.step-track .seg{flex:1;height:4px;border-radius:4px;background:var(--line);}
.step-track .seg.done{background:var(--sage);}
.panel{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px;}
.panel .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--sage-dark);font-weight:700;margin-bottom:8px;display:block;}
.panel h2{font-size:24px;margin-bottom:14px;}
.panel p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 18px;}
.fake-field{
  background:var(--sand-light);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:10px;font-size:14px;color:var(--muted);
}
.breath-ring{
  width:84px;height:84px;border-radius:50%;border:3px solid var(--sage);margin:6px auto 22px;
  display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;font-weight:700;
  font-size:13px;color:var(--sage-dark);animation:breathe 3.2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.16);}}
.receipt{
  background:var(--sand-light);border:1px dashed #c9c2ac;border-radius:12px;padding:18px;
  font-size:13.5px;margin-bottom:18px;
}
.receipt .r-row{display:flex;justify-content:space-between;padding:3px 0;}
.receipt .r-total{border-top:1px solid #c9c2ac;margin-top:8px;padding-top:9px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;font-weight:700;font-size:17px;}
.panel-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;}

footer{
  text-align:center;padding:36px 20px;color:var(--muted);font-size:12.5px;line-height:1.7;
  border-top:1px solid var(--line);
}

/* ---------- Product modal ---------- */
.card-media{cursor:pointer;}
.modal-overlay{
  position:fixed;inset:0;background:rgba(75, 100, 84,0.55);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:30;
}
.modal-overlay.active{display:flex;}
.product-modal{
  background:var(--white);border-radius:18px;max-width:560px;width:100%;
  max-height:88vh;overflow-y:auto;position:relative;
}
.product-modal .close-x{
  position:absolute;
  top:16px;
  right:16px;
  background:var(--sand-light);
  border:none;
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:16px;
  color:var(--muted);
  cursor:pointer;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
}
.product-modal .pm-media{
  aspect-ratio:16/10;background:var(--sand);display:flex;align-items:center;justify-content:center;
  font-size:64px;border-radius:18px 18px 0 0;overflow:hidden;
}
.product-modal .pm-media img{width:100%;height:100%;object-fit:cover;}
.product-modal .pm-body{padding:24px;}
.product-modal .pm-cat{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--sage-dark);font-weight:700;}
.product-modal h3{font-size:24px;margin:8px 0 10px;}
.product-modal .pm-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.product-modal .pm-price{font-size:22px;font-weight:800;}
.product-modal .pm-old{font-size:14px;color:var(--muted);text-decoration:line-through;}
.product-modal .pm-desc{font-size:14.5px;line-height:1.7;color:var(--ink);margin-bottom:20px;}

/* ---------- Admin ---------- */
.admin-wrap{max-width:640px;margin:0 auto;padding:48px 24px 80px;}
.admin-warning{
  background:#fbeee9;border:1px solid #ecc9b8;color:#8a4a30;border-radius:10px;
  padding:12px 16px;font-size:13px;margin-bottom:24px;
}
.field-group{margin-bottom:16px;}
.field-group label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;}
.field-group input, .field-group select, .field-group textarea{
  width:100%;font-family:inherit;font-size:14px;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);
}
.field-group textarea{resize:vertical;min-height:70px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.admin-list-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;
}

@media (max-width:900px){
  #cartContent{grid-template-columns:1fr !important;}
  .summary-box{margin:0;}
}
@media (max-width:640px){
  .nav-links{display:none;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .container{padding:0 32px;}
}
@media (prefers-reduced-motion: reduce){
  .breath-ring{animation:none;}
}


/* ===== Logo clair/sombre ===== */
.logo-light, .logo-dark{height:34px;width:auto;display:block;}
.logo-dark{display:none;}

/* ===== Mode sombre automatique selon le système ===== */
@media (prefers-color-scheme: dark) {
  .nav{background:rgba(11,11,11,.85);}
  .cookie-banner{background:rgba(15,15,15,.96);}
  .product-modal .close-x{background:#2a2a2a;color:#f5f5f5;}
  .logo-light{display:none;}
  .logo-dark{display:block;}
}

/* ===== Box mystère ===== */
.boxes-title{font-size:20px;margin:32px 0 14px;}
.boxes-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin-bottom:8px;
}
.box-card-media{
  aspect-ratio:1/1;background:var(--sand);display:flex;align-items:center;
  justify-content:center;font-size:44px;cursor:pointer;
}
.box-price-free{color:var(--sage-dark);font-weight:800;}

.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;}

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-4px, 2px) rotate(-3deg); }
  40% { transform: translate(4px, -2px) rotate(3deg); }
  60% { transform: translate(-3px, -1px) rotate(-2deg); }
  80% { transform: translate(3px, 2px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.shaking-box{font-size:64px;animation:shake 0.3s ease-in-out infinite;margin:20px 0;}

.direct-emoji-container{
  height:100px;display:flex;align-items:center;justify-content:center;
  font-size:4rem;margin:10px 0;
}

.won-item-card{
  background:var(--sand-light);border:1px solid var(--line);
  border-radius:10px;padding:16px;margin:12px 0;width:100%;text-align:center;
}
.won-value{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;
  font-weight:700;font-size:16px;color:var(--sage-dark);margin-top:4px;display:block;
}

/* ===== Footer étendu ===== */
.site-footer-extended{
  border-top:1px solid var(--line);margin-top:40px;padding:40px 0 24px;
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;margin-bottom:28px;
}
.footer-col h4{font-size:14px;margin-bottom:12px;}
.footer-col p{font-size:13px;color:var(--muted);line-height:1.6;}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:13.5px;color:var(--muted);}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:18px;text-align:center;
  font-size:12px;color:var(--muted);
}

.contact-form .field-group{margin-bottom:12px;}
.contact-form select, .contact-form textarea, .contact-form input{
  width:100%;font-family:inherit;font-size:13.5px;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);
}
.contact-form textarea{min-height:80px;resize:vertical;}

@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;}
}

.daily-gift-btn{
  position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;
  background:var(--gold);border:none;font-size:26px;cursor:pointer;z-index:500;
  box-shadow:0 4px 14px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;
  animation:giftPulse 2.4s ease-in-out infinite;
}
.daily-gift-btn.claimed{animation:none;opacity:0.55;}
@keyframes giftPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}

.win-toast{
  position:fixed;bottom:22px;left:22px;max-width:280px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);font-size:12.5px;z-index:400;
  display:flex;align-items:center;gap:10px;
  transform:translateY(20px);opacity:0;transition:all 0.35s ease;
}
.win-toast.visible{transform:translateY(0);opacity:1;}
.win-toast .toast-emoji{font-size:22px;}
.win-toast .toast-text b{color:var(--sage-dark);}

/* ===== Footer étendu ===== */
.site-footer-extended{
  border-top:1px solid var(--line);margin-top:40px;padding:40px 0 24px;
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;margin-bottom:28px;
}
.footer-col h4{font-size:14px;margin-bottom:12px;}
.footer-col p{font-size:13px;color:var(--muted);line-height:1.6;}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:13.5px;color:var(--muted);}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:18px;text-align:center;
  font-size:12px;color:var(--muted);
}

.contact-form .field-group{margin-bottom:12px;}
.contact-form select, .contact-form textarea, .contact-form input{
  width:100%;font-family:inherit;font-size:13.5px;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);
}
.contact-form textarea{min-height:80px;resize:vertical;}

@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;}
}

.daily-gift-btn{
  position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;
  background:var(--gold);border:none;font-size:26px;cursor:pointer;z-index:500;
  box-shadow:0 4px 14px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;
  animation:giftPulse 2.4s ease-in-out infinite;
}
.daily-gift-btn.claimed{animation:none;opacity:0.55;}
@keyframes giftPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}

.win-toast{
  position:fixed;bottom:22px;left:22px;max-width:280px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);font-size:12.5px;z-index:400;
  display:flex;align-items:center;gap:10px;
  transform:translateY(20px);opacity:0;transition:all 0.35s ease;
}
.win-toast.visible{transform:translateY(0);opacity:1;}
.win-toast .toast-emoji{font-size:22px;}
.win-toast .toast-text b{color:var(--sage-dark);}

/* ===== Timeline commande (Parfaitement synchro) ===== */

.order-timeline{
  position: relative;
  margin: 35px 0 30px;
  width: 100%;
}

.timeline-bar {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--line);
  border-radius: 20px;
  overflow: hidden;
  z-index: 0;
}

.timeline-progress{
  height: 100%;
  width: 0%;
  background: var(--sage);
  border-radius: 20px;
  transition: width .75s linear;
}

.timeline-points{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes rigoureusement égales */
  position: relative;
  z-index: 1;
}

.timeline-point{
  text-align: center;
}

.timeline-point span{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  color: transparent;
  transition: background .3s linear, box-shadow .3s linear;
}

.timeline-point span.done{
  background: var(--sage);
  box-shadow: 0 0 0 5px rgba(124,152,133,.18);
}

.timeline-point p{
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  transition: color .3s linear;
  padding: 0 4px;
}

.timeline-point p.done{
  color: var(--ink);
  font-weight: 700;
}

/* Animation sous-catégorie */

#subCategoryGroup{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-8px);
  transition:
    max-height .25s ease,
    opacity .25s ease,
    transform .25s ease;
}

#subCategoryGroup.show{
  max-height:120px;
  opacity:1;
  transform:translateY(0);
}


/* Petite animation lors du changement des options */

#contactSubType{
  transition:opacity .18s ease;
}

#contactSubType.loading{
  opacity:.45;
}


/* Animation du textarea */

#contactMessage{
  transition:border-color .2s ease,
             box-shadow .2s ease;
}

#contactMessage:focus{
  border-color:var(--sage);
  box-shadow:0 0 0 4px rgba(124,152,133,.15);
}


/* Désactivation du bouton */

#contactSubmitBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}


/* Mode sombre */

@media(prefers-color-scheme:dark){

  #contactSubType,
  #contactType,
  #contactMessage,
  #contactEmail{
    background:#151515;
    border-color:rgba(255,255,255,.12);
    color:#f5f5f5;
  }

  #contactMessage:focus{
    box-shadow:0 0 0 4px rgba(124,152,133,.22);
  }

}

/* ===== Confettis ===== */
.confetti-burst {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  animation: confetti-explode 1.5s cubic-bezier(.15,.8,.25,1) forwards;
}

@keyframes confetti-explode {
  0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
  70% { opacity: .9; }
  100% { transform: translate(var(--x), var(--y)) scale(.35); opacity: 0; }
}