/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --bg:           #F4F1EC;
  --surface:      #FFFFFF;
  --deep:         #0D0B09;
  --text:         #181512;
  --muted:        #4A4540;
  --accent:       #1E5C4A;
  --accent2:      #2E7A60;
  --gold:         #B8965A;
  --gold2:        #D4AD73;
  --danger:       #C13D3D;
  --border:       rgba(28,25,23,.13);
  --overlay:      rgba(20,18,16,.6);
  --header-bg:    rgba(244,241,236,.96);
  --card-bg:      #FFFFFF;
  --modal-bg:     #FFFFFF;
  --input-bg:     #F4F1EC;
  --shadow-sm:    0 1px 8px rgba(28,25,23,.07);
  --shadow-md:    0 4px 24px rgba(28,25,23,.10);
  --shadow-lg:    0 16px 64px rgba(28,25,23,.16);
  --r-sm:    6px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;
  --ff-serif: 'Playfair Display', Georgia, serif;
  --ff-sans:  'Jost', system-ui, sans-serif;
  --dur-fast: 150ms;
  --dur-mid:  280ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"] {
  --bg:          #111210;
  --surface:     #1C1B19;
  --deep:        #F4F1EC;
  --text:        #D6D1C9;
  --muted:       #6B6660;
  --accent:      #3A8F72;
  --accent2:     #4DAA89;
  --gold:        #C9A86A;
  --gold2:       #DFC08A;
  --border:      rgba(244,241,236,.07);
  --overlay:     rgba(0,0,0,.75);
  --header-bg:   rgba(17,18,16,.92);
  --card-bg:     #1C1B19;
  --modal-bg:    #1C1B19;
  --input-bg:    #111210;
  --shadow-sm:   0 1px 8px rgba(0,0,0,.3);
  --shadow-md:   0 4px 24px rgba(0,0,0,.35);
  --shadow-lg:   0 16px 64px rgba(0,0,0,.5);
}

/* ============================================================
   RESET & BASE
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:18px;-webkit-font-smoothing:antialiased}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--ff-sans);font-weight:300;line-height:1.65;
  min-height:100vh;
  transition:background var(--dur-mid),color var(--dur-mid);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
ul,ol{list-style:none}

/* ============================================================
   UTILITY
============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   HEADER
============================================================ */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:800;
  height:68px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.25rem,5vw,3.5rem);
  background:var(--header-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:background var(--dur-mid),box-shadow var(--dur-mid);
}
#site-header.scrolled{box-shadow:var(--shadow-sm)}

/* Logo */
.logo{display:flex;flex-direction:column;line-height:1;gap:2px}
.logo__name{
  font-family:var(--ff-serif);font-weight:400;font-size:1.55rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.logo__tag{
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
}

/* Nav */
.header-nav{display:flex;gap:2rem}
.header-nav a{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
  transition:color var(--dur-fast);
  position:relative;
}
.header-nav a::after{
  content:'';position:absolute;left:0;bottom:-3px;width:0;height:1px;
  background:var(--accent);transition:width var(--dur-mid) var(--ease-out);
}
.header-nav a:hover{color:var(--text)}
.header-nav a:hover::after{width:100%}
.proto-nav-btn{
  background:none;border:none;padding:0;
  font-family:var(--ff-sans);font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:500;cursor:pointer;
  position:relative;
  transition:color var(--dur-fast);
}
.proto-nav-btn::after{
  content:'';position:absolute;left:0;bottom:-3px;width:0;height:1px;
  background:var(--accent);transition:width var(--dur-mid) var(--ease-out);
}
.proto-nav-btn:hover{color:var(--accent2)}
.proto-nav-btn:hover::after{width:100%}

/* Header right actions */
.header-actions{display:flex;align-items:center;gap:.75rem}

/* Theme toggle */
.theme-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
.theme-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(12deg) scale(1.05)}
.theme-btn svg{width:15px;height:15px}
.icon-sun{display:none}
.icon-moon{display:block}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}

/* Cart button */
.cart-btn{
  position:relative;display:flex;align-items:center;gap:.5rem;
  padding:.45rem .9rem;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);
  font-size:.82rem;letter-spacing:.06em;color:var(--text);
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.cart-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.cart-btn svg{width:17px;height:17px}
.cart-badge{
  position:absolute;top:-7px;right:-7px;
  min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--danger);color:#fff;
  font-size:.6rem;font-weight:600;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0);
  transition:opacity var(--dur-fast),transform var(--dur-fast) var(--ease-out);
  border:2px solid var(--bg);
}
.cart-badge.on{opacity:1;transform:scale(1)}

/* ============================================================
   HERO
============================================================ */
#hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
  padding:0 clamp(1.25rem,8vw,9rem);
}

/* Animated background blobs */
.hero-blob{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(80px);opacity:.45;
}
.hero-blob--1{
  width:55vw;height:55vw;max-width:700px;max-height:700px;
  top:-10%;right:-5%;
  background:radial-gradient(circle, rgba(46,122,96,.35) 0%, transparent 70%);
  animation:blobFloat1 12s ease-in-out infinite;
}
.hero-blob--2{
  width:35vw;height:35vw;max-width:450px;max-height:450px;
  bottom:5%;left:-5%;
  background:radial-gradient(circle, rgba(184,150,90,.28) 0%, transparent 70%);
  animation:blobFloat2 16s ease-in-out infinite;
}
@keyframes blobFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,4%) scale(1.05)}}
@keyframes blobFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-3%) scale(1.04)}}

.hero-inner{position:relative;z-index:2;max-width:650px;padding-top:68px}

.hero-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.3rem .9rem;border-radius:var(--r-pill);
  border:1px solid rgba(46,122,96,.3);background:rgba(46,122,96,.07);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.8rem;
}
.hero-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}

.hero-title{
  font-family:var(--ff-serif);font-size:clamp(2.6rem,5.5vw,4.6rem);
  font-weight:400;line-height:1.07;color:var(--deep);margin-bottom:1.4rem;
}
.hero-title em{font-style:italic;color:var(--accent)}

.hero-sub{
  font-size:clamp(1rem,1.6vw,1.15rem);color:var(--muted);
  max-width:440px;line-height:1.8;margin-bottom:2.8rem;
}

.hero-ctas{display:flex;gap:.85rem;flex-wrap:wrap}

.btn-primary{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.8rem;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;
  font-size:.9rem;font-weight:500;letter-spacing:.07em;
  transition:background var(--dur-mid),transform var(--dur-fast);
}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px)}
.btn-primary svg{width:15px;height:15px}

.btn-outline{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.8rem;border-radius:var(--r-pill);
  border:1.5px solid var(--border);background:transparent;color:var(--text);
  font-size:.9rem;font-weight:400;letter-spacing:.07em;
  transition:border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

.hero-stats{
  display:flex;gap:2.5rem;margin-top:3.5rem;
  padding-top:2rem;border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.hero-stat__n{
  font-family:var(--ff-serif);font-size:2.4rem;
  font-weight:400;color:var(--accent);line-height:1;
}
.hero-stat__l{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:.25rem;
}

/* ============================================================
   PRODUCTS SECTION
============================================================ */
#products{padding:clamp(4rem,9vh,7rem) clamp(1.25rem,5vw,3.5rem)}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:3rem;gap:1rem;flex-wrap:wrap;
}
.section-eye{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem;
}
.section-title{
  font-family:var(--ff-serif);font-size:clamp(2rem,3.8vw,3rem);
  font-weight:400;line-height:1.18;color:var(--deep);
}
.section-title em{font-style:italic;color:var(--accent)}
.section-note{font-size:.85rem;color:var(--muted);max-width:240px;text-align:right;line-height:1.6}

/* Grid */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1.5rem;
}

/* Product card */
.product-card{
  background:var(--card-bg);border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid);
  animation:fadeUp .5s var(--ease-out) both;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.product-card:nth-child(1){animation-delay:.05s}
.product-card:nth-child(2){animation-delay:.10s}
.product-card:nth-child(3){animation-delay:.16s}
.product-card:nth-child(4){animation-delay:.22s}
.product-card:nth-child(5){animation-delay:.28s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.card-img{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(135deg,#EAF2EE 0%,#F2EFE9 100%);
}
[data-theme="dark"] .card-img{
  background:linear-gradient(135deg,#1A2820 0%,#1E1D1B 100%);
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.product-card:hover .card-img img{transform:scale(1.05)}
.card-badge{
  position:absolute;top:.7rem;left:.7rem;
  padding:.22rem .6rem;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}

.card-body{padding:1.1rem 1.25rem 1.4rem}
.card-name{
  font-family:var(--ff-serif);font-size:1.2rem;font-weight:400;
  color:var(--deep);line-height:1.25;margin-bottom:.2rem;
}
.card-sub{font-size:.82rem;color:var(--muted);letter-spacing:.04em;margin-bottom:.85rem}
.card-foot{display:flex;align-items:center;justify-content:flex-end}
.card-voir-plus{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem 1.1rem;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;
  font-family:var(--ff-sans);font-size:.82rem;font-weight:500;
  letter-spacing:.06em;border:none;cursor:pointer;
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.card-voir-plus:hover{background:var(--accent2);transform:translateY(-1px)}

/* SVG product placeholder colors */
.card-img svg{width:100%;height:100%;position:absolute;inset:0}

/* ============================================================
   TRUST BAND
============================================================ */
#trust{
  background:var(--accent);
  padding:2.2rem clamp(1.25rem,5vw,3.5rem);
}
.trust-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1.75rem;
}
.trust-item{display:flex;align-items:center;gap:.9rem}
.trust-icon{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.trust-icon svg{width:18px;height:18px;stroke:#fff}
.trust-label{font-size:.9rem;font-weight:500;color:#fff;letter-spacing:.03em}
.trust-sub{font-size:.78rem;color:rgba(255,255,255,.65);margin-top:.12rem}

/* ============================================================
   FOOTER
============================================================ */
footer{
  padding:3.5rem clamp(1.25rem,5vw,3.5rem) 1.75rem;
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;
}
.footer-brand__name{
  font-family:var(--ff-serif);font-size:1.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}
.footer-brand__desc{
  font-size:.88rem;color:var(--muted);max-width:280px;
  margin-top:.65rem;line-height:1.75;
}
.footer-copy{
  grid-column:1/-1;font-size:.78rem;color:var(--muted);
  letter-spacing:.08em;padding-top:1.25rem;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}

/* ============================================================
   SHARED BACKDROP
============================================================ */
.backdrop{
  position:fixed;inset:0;z-index:900;
  background:var(--overlay);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-mid);
}
.backdrop.on{opacity:1;pointer-events:all}

/* ============================================================
   PRODUCT MODAL
============================================================ */
.prod-modal{
  position:fixed;inset:0;z-index:910;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;pointer-events:none;
}
.prod-modal.on{pointer-events:all}
.prod-modal__card{
  background:var(--modal-bg);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width:100%;max-width:580px;max-height:88vh;overflow-y:auto;
  opacity:0;transform:scale(.94) translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.prod-modal.on .prod-modal__card{opacity:1;transform:scale(1) translateY(0)}

.prod-modal__img{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,#EAF2EE,#F2EFE9);
}
[data-theme="dark"] .prod-modal__img{background:linear-gradient(135deg,#1A2820,#1E1D1B)}
.prod-modal__img img{width:100%;height:100%;object-fit:cover}
.prod-modal__img svg{width:100%;height:100%;position:absolute;inset:0}
.modal-x{
  position:absolute;top:.85rem;right:.85rem;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.8);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;z-index:2;
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.modal-x:hover{background:#fff;transform:scale(1.08)}
.modal-x svg{width:16px;height:16px;stroke:var(--deep)}

.prod-modal__body{padding:1.8rem 2rem 2.2rem}
.prod-modal__badge{
  display:inline-block;padding:.2rem .7rem;border-radius:var(--r-pill);
  background:rgba(46,122,96,.1);color:var(--accent);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.8rem;
}
.prod-modal__name{
  font-family:var(--ff-serif);font-size:2rem;font-weight:400;
  color:var(--deep);line-height:1.2;margin-bottom:.35rem;
}
.prod-modal__sub{font-size:1rem;color:var(--muted);margin-bottom:1.1rem}
.prod-modal__price-row{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.6rem}
.prod-modal__price{font-family:var(--ff-serif);font-size:2.1rem;color:var(--accent)}
.prod-modal__orig{font-size:.85rem;color:var(--muted);text-decoration:line-through}

/* Action buttons */
.prod-modal__btns{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.2rem}
.btn-detail{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.76rem 1rem;border-radius:var(--r-md);
  border:1.5px solid var(--accent);color:var(--accent);
  font-size:.76rem;font-weight:500;letter-spacing:.04em;
  transition:background var(--dur-fast);cursor:pointer;background:transparent;
  font-family:var(--ff-sans);
}
.btn-detail:hover{background:rgba(46,122,96,.06)}
.btn-order{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.76rem 1rem;border-radius:var(--r-md);
  background:var(--accent);color:#fff;border:none;
  font-size:.76rem;font-weight:500;letter-spacing:.04em;
  transition:background var(--dur-fast),transform var(--dur-fast);cursor:pointer;
  font-family:var(--ff-sans);
}
.btn-order:hover{background:var(--accent2);transform:translateY(-1px)}

/* Detail panel */
.detail-panel{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height var(--dur-slow) var(--ease-out),opacity var(--dur-mid);
}
.detail-panel.on{max-height:700px;opacity:1}
.detail-divider{height:1px;background:var(--border);margin:1.1rem 0}
.detail-sec-title{
  font-family:var(--ff-serif);font-size:.95rem;font-weight:500;
  color:var(--deep);margin-bottom:.5rem;
}
.detail-sec p{font-size:1.05rem;color:var(--muted);line-height:1.78;margin-bottom:.7rem}
.detail-sec ul{display:flex;flex-direction:column;gap:.35rem}
.detail-sec li{
  font-size:1rem;color:var(--text);
  padding-left:1.1rem;position:relative;
}
.detail-sec li::before{
  content:'✦';position:absolute;left:0;
  color:var(--gold);font-size:.5rem;top:.35em;
}

/* ============================================================
   CART MODAL
============================================================ */
.cart-modal{
  position:fixed;inset:0;z-index:910;
  display:flex;align-items:flex-start;justify-content:flex-end;
  padding:1rem 1rem;padding-top:78px;pointer-events:none;
}
.cart-modal.on{pointer-events:all}
.cart-panel{
  background:var(--modal-bg);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width:100%;max-width:390px;max-height:82vh;
  overflow-y:auto;
  opacity:0;transform:translateX(22px);
  transition:opacity var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out);
}
.cart-modal.on .cart-panel{opacity:1;transform:translateX(0)}

.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem 1.5rem;border-bottom:1px solid var(--border);
}
.cart-head-title{
  font-family:var(--ff-serif);font-size:1.25rem;font-weight:400;color:var(--deep);
}
.cart-body{padding:1.3rem 1.5rem 1.75rem}

/* Empty state */
.cart-empty{text-align:center;padding:2.5rem 0}
.cart-empty svg{width:46px;height:46px;stroke:var(--border);margin:0 auto .9rem}
.cart-empty p{font-size:.92rem;color:var(--muted)}

/* Cart items */
.cart-item{
  display:flex;align-items:center;gap:.9rem;
  padding:.8rem 0;border-bottom:1px solid var(--border);
}
.cart-item:last-of-type{border-bottom:none}
.cart-thumb{
  width:50px;height:50px;border-radius:var(--r-sm);
  overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#EAF2EE,#F2EFE9);
  display:flex;align-items:center;justify-content:center;
}
[data-theme="dark"] .cart-thumb{background:linear-gradient(135deg,#1A2820,#1E1D1B)}
.cart-thumb img{width:50px;height:50px;object-fit:cover}
.cart-thumb svg{width:50px;height:50px}
.cart-item-info{flex:1}
.cart-item-name{font-size:.92rem;font-weight:500;color:var(--text);margin-bottom:.12rem}
.cart-item-qty{font-size:.72rem;color:var(--muted)}
.cart-item-price{font-family:var(--ff-serif);font-size:.95rem;color:var(--accent)}
.cart-remove-btn{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast);
}
.cart-remove-btn:hover{background:rgba(193,61,61,.08)}
.cart-remove-btn svg{width:13px;height:13px;stroke:var(--danger)}

.cart-summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 0 .4rem;font-size:.78rem;color:var(--muted);
}
.cart-total{font-family:var(--ff-serif);font-size:1.25rem;color:var(--deep)}

/* Bouton neutre : le canal est choisi ensuite, dans la modale */
.btn-wa{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;padding:.95rem;border-radius:var(--r-md);
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  font-family:var(--ff-sans);
  font-size:.86rem;font-weight:600;letter-spacing:.04em;
  margin-top:.9rem;
  box-shadow:0 2px 10px rgba(30,92,74,.25);
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.btn-wa:hover{background:var(--accent2);transform:translateY(-1px)}
.btn-wa svg{width:18px;height:18px;stroke:#fff;fill:none;flex-shrink:0}

/* ============================================================
   TOAST
============================================================ */
.toast{
  position:fixed;bottom:1.5rem;left:50%;
  transform:translateX(-50%) translateY(14px);
  background:#1A3D2E;color:#FFFFFF;
  padding:.65rem 1.5rem;border-radius:var(--r-pill);
  font-size:.76rem;letter-spacing:.06em;
  opacity:0;pointer-events:none;white-space:nowrap;z-index:1200;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transition:opacity var(--dur-mid),transform var(--dur-mid) var(--ease-out);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   SCROLLBAR
============================================================ */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(46,122,96,.3);border-radius:99px}

/* ============================================================
   CONFIRM WHATSAPP MODAL
============================================================ */
.wa-backdrop{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;
  transition:opacity 130ms;
}
.wa-backdrop.on{opacity:1;pointer-events:all}

.wa-modal{
  position:fixed;inset:0;z-index:1010;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;pointer-events:none;
}
.wa-modal.on{pointer-events:all}
.wa-card{
  background:var(--modal-bg);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width:100%;max-width:400px;
  padding:2.2rem 2rem 2rem;text-align:center;
  opacity:0;transform:scale(.96) translateY(8px);
  /* Apparition accélérée : le client atteint WhatsApp plus vite */
  transition:opacity 130ms var(--ease-out),transform 130ms var(--ease-out);
}
.wa-modal.on .wa-card{opacity:1;transform:scale(1) translateY(0)}

.wa-icon{
  width:66px;height:66px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.3rem;
  box-shadow:0 8px 22px rgba(37,211,102,.28);
}
.wa-icon svg{width:34px;height:34px;fill:#fff}

.wa-title{
  font-family:var(--ff-serif);font-size:1.55rem;font-weight:400;
  color:var(--deep);margin-bottom:.55rem;
}
.wa-desc{font-size:.8rem;color:var(--muted);line-height:1.7;margin-bottom:1.3rem}
.wa-desc strong{color:var(--text);font-weight:500}


/* Bandeau rassurant avant le choix du canal */
.wa-reassure{
  display:flex;align-items:flex-start;gap:.6rem;
  margin:0 0 1.3rem;padding:.7rem .85rem;
  border-radius:var(--r-md);
  background:rgba(46,122,96,.08);
  border-left:3px solid var(--accent);
  text-align:left;
}
.wa-reassure svg{
  width:16px;height:16px;flex-shrink:0;
  stroke:var(--accent);margin-top:.1rem;
}
.wa-reassure span{
  font-size:.75rem;line-height:1.55;color:var(--text);
}
.wa-reassure strong{color:var(--accent);font-weight:600}

/* Trois canaux au choix */
.wa-channels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55rem;margin-bottom:.9rem}
.wa-channels a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;padding:.85rem .4rem;
  border-radius:var(--r-md);text-decoration:none;
  font-family:var(--ff-sans);font-size:.73rem;font-weight:600;
  letter-spacing:.02em;
  transition:transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.wa-channels a:hover{transform:translateY(-2px)}
.wa-channels svg{width:20px;height:20px}

.wa-btn-call{
  background:var(--accent);color:#fff;
  box-shadow:0 2px 8px rgba(30,92,74,.25);
}
.wa-btn-call:hover{background:var(--accent2)}
.wa-btn-call svg{stroke:#fff;fill:none}

.wa-btn-sms{
  background:transparent;color:var(--accent);
  border:1.5px solid var(--accent);
}
.wa-btn-sms:hover{background:rgba(46,122,96,.08)}
.wa-btn-sms svg{stroke:var(--accent);fill:none}

@media(max-width:380px){
  .wa-channels{grid-template-columns:1fr;gap:.45rem}
  .wa-channels a{flex-direction:row;gap:.5rem;padding:.7rem}
}
.wa-fallback{
  display:none;margin:0 0 .9rem;padding:.8rem .9rem;
  border-radius:var(--r-md);
  background:rgba(184,150,90,.10);
  border:1px dashed rgba(184,150,90,.5);
  text-align:left;
}
.wa-fallback.on{display:block}
.wa-fallback__txt{font-size:.72rem;color:var(--text);line-height:1.5;margin-bottom:.6rem}
.wa-fallback__row{display:flex;align-items:center;gap:.5rem}
.wa-fallback__num{
  flex:1;font-family:var(--ff-serif);font-size:1.05rem;
  color:var(--accent);letter-spacing:.02em;
}
.wa-fallback__copy{
  padding:.4rem .8rem;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  font-family:var(--ff-sans);font-size:.7rem;font-weight:600;
  transition:background var(--dur-fast);
}
.wa-fallback__copy:hover{background:var(--accent2)}

.wa-btn-cancel{
  width:100%;
  padding:.65rem 1rem;border-radius:var(--r-md);
  border:1.5px solid var(--border);background:transparent;
  color:var(--muted);font-family:var(--ff-sans);font-size:.78rem;font-weight:400;
  cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast);
}
.wa-btn-cancel:hover{border-color:var(--danger);color:var(--danger)}
.wa-btn-confirm{
  text-decoration:none;
  box-shadow:0 2px 8px rgba(37,211,102,.3);

  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1rem;border-radius:var(--r-md);
  background:#25D366;color:#fff;border:none;
  font-family:var(--ff-sans);font-size:.78rem;font-weight:500;cursor:pointer;
  box-shadow:0 4px 14px rgba(37,211,102,.28);
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.wa-btn-confirm:hover{background:#1ebe5a;transform:translateY(-1px)}
.wa-btn-confirm svg{width:16px;height:16px;fill:#fff;flex-shrink:0}

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:760px){
  .header-nav{display:none}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .prod-modal__btns{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}
}
@media(max-width:420px){
  .products-grid{grid-template-columns:1fr}
}

/* ============================================================
   PAGE PROTOCOLE (overlay full-screen)
============================================================ */
#protocole-page{
  position:fixed;inset:0;z-index:850;
  background:var(--bg);
  overflow-y:auto;
  opacity:0;pointer-events:none;
  transform:translateY(24px);
  transition:opacity var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out);
}
#protocole-page.open{
  opacity:1;pointer-events:all;transform:translateY(0);
}

/* Steps sticky bar */
.proto-steps-bar{
  position:sticky;top:68px;z-index:700;
  display:flex;align-items:center;gap:0;
  background:var(--surface);border-bottom:1px solid var(--border);
  overflow-x:auto;padding:0 clamp(1.25rem,5vw,3.5rem);
}
.proto-step-tab{
  display:flex;align-items:center;gap:.55rem;
  padding:.9rem 1.3rem;border-bottom:2px solid transparent;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;font-weight:400;
  transition:color var(--dur-fast),border-color var(--dur-fast);
  cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;
  font-family:var(--ff-sans);
}
.proto-step-tab:hover{color:var(--text)}
.proto-step-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.proto-step-num{
  width:21px;height:21px;border-radius:50%;
  background:var(--border);color:var(--muted);
  font-size:.6rem;font-weight:600;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast),color var(--dur-fast);
}
.proto-step-tab.active .proto-step-num{background:var(--accent);color:#fff}

/* Proto hero */
.proto-hero{
  padding:clamp(5.5rem,14vh,8rem) clamp(1.25rem,8vw,9rem) clamp(2.5rem,6vh,4rem);
  position:relative;overflow:hidden;
}
.proto-hero::before{
  content:'';position:absolute;top:-20%;right:-5%;width:50vw;height:110%;
  background:radial-gradient(ellipse,rgba(46,122,96,.10) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.proto-hero-inner{position:relative;z-index:1;max-width:680px}
.proto-eye{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.65rem}
.proto-h1{
  font-family:var(--ff-serif);font-size:clamp(2rem,4.5vw,3.6rem);
  font-weight:400;line-height:1.1;color:var(--deep);margin-bottom:1rem;
}
.proto-h1 em{font-style:italic;color:var(--accent)}
.proto-lead{font-size:clamp(1rem,1.5vw,1.1rem);color:var(--muted);max-width:500px;line-height:1.8}

/* Product blocks */
.proto-products{padding:0 clamp(1.25rem,5vw,3.5rem) clamp(3rem,8vh,5rem)}

.proto-block{
  padding:clamp(2.5rem,6vh,4.5rem) 0;
  border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
  opacity:1;transform:translateY(0);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.proto-block.vis{opacity:1;transform:translateY(0)}
.proto-block:last-child{border-bottom:none}
.proto-block:nth-child(even){direction:rtl}
.proto-block:nth-child(even)>*{direction:ltr}

.proto-img-wrap{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:1/1;
  background:linear-gradient(135deg,#EAF2EE,#F2EFE9);
  box-shadow:var(--shadow-md);
}
[data-theme="dark"] .proto-img-wrap{background:linear-gradient(135deg,#1A2820,#1E1D1B)}
.proto-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-out)}
.proto-block:hover .proto-img-wrap img{transform:scale(1.04)}
.proto-badge-num{
  position:absolute;top:1rem;left:1rem;
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-family:var(--ff-serif);font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(30,92,74,.35);
}

.proto-content{display:flex;flex-direction:column;gap:1rem}
.proto-cat{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.proto-name{font-family:var(--ff-serif);font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:400;line-height:1.15;color:var(--deep)}
.proto-sub{font-size:1rem;color:var(--muted);letter-spacing:.03em}
.proto-price-row{display:flex;align-items:baseline;gap:.65rem}
.proto-price{font-family:var(--ff-serif);font-size:1.4rem;color:var(--accent)}
/* Badge livraison — brillance défilante + camion animé */
.proto-livraison{
  display:inline-flex;align-items:center;gap:.45rem;
  position:relative;overflow:hidden;
  margin-top:.5rem;padding:.4rem .85rem;
  border-radius:var(--r-pill);
  background:linear-gradient(100deg,#1E5C4A,#2E7A60,#1E5C4A);
  border:1px solid rgba(212,173,115,.45);
  font-size:.74rem;font-weight:600;letter-spacing:.04em;
  color:#FFF8E7;white-space:nowrap;
  box-shadow:0 2px 10px rgba(30,92,74,.28);
  animation:livraisonPulse 3s ease-in-out infinite;
}
/* Reflet lumineux qui traverse le badge */
.proto-livraison::after{
  content:'';position:absolute;top:0;left:-60%;
  width:45%;height:100%;
  background:linear-gradient(100deg,
    transparent,rgba(255,248,231,.42),transparent);
  transform:skewX(-22deg);
  animation:livraisonShine 3.4s ease-in-out infinite;
}
/* Camion qui avance légèrement */
.proto-livraison svg{
  width:14px;height:14px;flex-shrink:0;
  fill:#E2C088;
  animation:livraisonTruck 2.2s ease-in-out infinite;
}
/* Pastille clignotante */
.livraison-dot{
  width:6px;height:6px;border-radius:50%;
  background:#E2C088;flex-shrink:0;
  animation:livraisonDot 1.5s ease-in-out infinite;
}
@keyframes livraisonShine{
  0%{left:-60%}
  55%,100%{left:125%}
}
@keyframes livraisonTruck{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}
@keyframes livraisonDot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.7)}
}
@keyframes livraisonPulse{
  0%,100%{box-shadow:0 2px 10px rgba(30,92,74,.28)}
  50%{box-shadow:0 2px 18px rgba(212,173,115,.42)}
}
/* Respect des préférences d'accessibilité */
@media(prefers-reduced-motion:reduce){
  .proto-livraison,
  .proto-livraison::after,
  .proto-livraison svg,
  .livraison-dot{animation:none}
}
.proto-orig{font-size:.78rem;color:var(--muted);text-decoration:line-through}
.proto-desc{font-size:1.1rem;color:var(--muted);line-height:1.8;border-left:2px solid var(--accent);padding-left:.9rem}
.proto-benefits{display:flex;flex-direction:column;gap:.35rem}
.proto-ben{display:flex;align-items:flex-start;gap:.65rem;font-size:1.05rem;color:var(--text);line-height:1.5}
.proto-ben::before{content:'✦';color:var(--gold);font-size:.48rem;margin-top:.42em;flex-shrink:0}
.proto-btns-row{display:flex;gap:.7rem;flex-wrap:wrap;align-self:flex-start}
.proto-btn-panier{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.76rem 1.4rem;border-radius:var(--r-pill);
  border:1.5px solid var(--accent);color:var(--accent);background:transparent;
  font-family:var(--ff-sans);font-size:.78rem;font-weight:500;letter-spacing:.06em;
  cursor:pointer;transition:background var(--dur-fast),transform var(--dur-fast);
}
.proto-btn-panier:hover{background:rgba(46,122,96,.07);transform:translateY(-1px)}
.proto-btn-panier svg{width:14px;height:14px;stroke:var(--accent)}
.proto-btn-valider{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.76rem 1.4rem;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;border:none;
  font-family:var(--ff-sans);font-size:.78rem;font-weight:500;letter-spacing:.06em;
  cursor:pointer;transition:background var(--dur-mid),transform var(--dur-fast);
}
.proto-btn-valider:hover{background:var(--accent2);transform:translateY(-2px)}
.proto-btn-valider svg{width:14px;height:14px;stroke:#fff}

/* Proto footer strip */
.proto-footer-strip{
  padding:2rem clamp(1.25rem,5vw,3.5rem);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.proto-footer-brand{font-family:var(--ff-serif);font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.proto-footer-copy{font-size:.66rem;color:var(--muted);letter-spacing:.08em}

@media(max-width:820px){
  .proto-block{grid-template-columns:1fr;gap:1.6rem}
  .proto-block:nth-child(even){direction:ltr}
  .proto-steps-bar{padding:0 1rem}
  .proto-step-tab{padding:.8rem .85rem;font-size:.64rem}
}


/* ============================================================
   DIAPORAMA (proto-block)
============================================================ */
.slideshow-wrap{
  position:relative;aspect-ratio:1/1;
  border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,#EAF2EE,#F2EFE9);
  box-shadow:var(--shadow-md);
}
[data-theme="dark"] .slideshow-wrap{background:linear-gradient(135deg,#1A2820,#1E1D1B)}

.slideshow-wrap .proto-badge-num{
  position:absolute;top:1rem;left:1rem;z-index:10;
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-family:var(--ff-serif);font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(30,92,74,.35);
}

/* Slides */
.slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity .7s ease-in-out;
}
.slide.active{opacity:1;position:relative}
.slide img{width:100%;height:100%;object-fit:cover;display:block}

/* Arrows */
.slide-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;z-index:10;
  background:rgba(20,20,20,.65);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.35);
  cursor:pointer;transition:background var(--dur-fast),transform var(--dur-fast);
}
.slide-arrow:hover{background:rgba(20,20,20,.9);transform:translateY(-50%) scale(1.08)}
.slide-arrow svg{width:15px;height:15px;stroke:#ffffff;stroke-width:2.5}
.slide-arrow--prev{left:.7rem}
.slide-arrow--next{right:.7rem}

/* Dots */
.slide-dots{
  position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.4rem;z-index:10;
}
.slide-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  cursor:pointer;transition:background var(--dur-fast),transform var(--dur-fast);
}
.slide-dot.active{background:#fff;transform:scale(1.2)}