/* ══════════════════════════════════════════
   LA CARTOUCHE — SPÉCIALISTE MARLBORO
   Design : Sombre premium — rouge Marlboro
   ══════════════════════════════════════════ */

/* ── TOKENS (dark by default) ── */
:root {
  --bg:        #0d0d0d;
  --bg2:       #141414;
  --surface:   #1a1a1a;
  --surface2:  #202020;
  --text:      #f0e8dc;
  --text2:     #b09880;
  --sub:       #6e5e50;
  --accent:    #cc0000;
  --accent2:   #a80000;
  --gold:      #d4a84b;
  --gold2:     #b8860b;
  --border:    rgba(204,0,0,.15);
  --border2:   rgba(204,0,0,.28);
  --glow:      rgba(204,0,0,.22);
  --r:         4px;
  --r-sm:      2px;
  --font:      'Outfit', system-ui, sans-serif;
  --serif:     'Playfair Display', Georgia, serif;
  --ease:      cubic-bezier(.4,0,.2,1);
  /* Couleurs gammes */
  --c-red:    #cc0000;
  --c-gold:   #c8991a;
  --c-silver: #9eaab4;
  --c-ice:    #1dc8a8;
  --c-double: #8b00cc;
  --c-blue:   #1a6acc;
}

/* Mode clair (toggle) */
body.light {
  --bg:        #f5f0eb;
  --bg2:       #ede8e0;
  --surface:   #ffffff;
  --surface2:  #faf7f3;
  --text:      #1a1108;
  --text2:     #5c4a35;
  --sub:       #9c8570;
  --accent:    #cc0000;
  --accent2:   #a80000;
  --gold:      #b8921a;
  --gold2:     #9a7a14;
  --border:    rgba(204,0,0,.10);
  --border2:   rgba(204,0,0,.20);
  --glow:      rgba(204,0,0,.12);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  overflow-x:hidden;line-height:1.65;cursor:none;
  transition:background .5s var(--ease),color .5s var(--ease);
}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.hidden{display:none!important}
.sub{color:var(--sub);font-size:.85rem}
.container{width:min(1200px,92%);margin-inline:auto}

/* ══════════════════════════════════════════
   BANDEAU LIVRAISON
   ══════════════════════════════════════════ */
.top-bar{
  background:var(--accent);padding:.45rem 0;text-align:center;position:sticky;top:0;z-index:101;
}
.top-bar p{
  font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;gap:1.5rem;
  flex-wrap:wrap;
}
.top-bar p span{display:flex;align-items:center;gap:.35rem}

/* ══════════════════════════════════════════
   SMOKE CANVAS
   ══════════════════════════════════════════ */
.smoke-canvas{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  opacity:.35;
}

/* ══════════════════════════════════════════
   CUSTOM CURSOR
   ══════════════════════════════════════════ */
.custom-cursor{
  position:fixed;z-index:9998;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--accent);pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease);
}
.custom-dot{
  position:fixed;z-index:9999;width:5px;height:5px;border-radius:50%;
  background:var(--accent);pointer-events:none;
  transform:translate(-50%,-50%);
  box-shadow:0 0 6px 2px rgba(123,28,46,.35);
}
body.cursor-hover .custom-cursor{width:52px;height:52px;background:rgba(204,0,0,.08)}

@media(hover:none){
  .custom-cursor,.custom-dot{display:none}
  body{cursor:auto}
}

/* ══════════════════════════════════════════
   LOADER
   ══════════════════════════════════════════ */
.loader{
  position:fixed;inset:0;z-index:10000;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .3s .6s;
  overflow:hidden;
}
.loader.out{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}

/* Ligne rouge diagonale décoration */
.loader-bg-line{
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background:
    linear-gradient(105deg,transparent 35%,rgba(204,0,0,.07) 35%,rgba(204,0,0,.07) 36%,transparent 36%),
    linear-gradient(105deg,transparent 60%,rgba(204,0,0,.04) 60%,rgba(204,0,0,.04) 61.5%,transparent 61.5%);
}

.loader-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  text-align:center;
}

.loader-eyebrow{
  font-size:.6rem;font-weight:700;letter-spacing:6px;text-transform:uppercase;
  color:rgba(255,255,255,.25);
  opacity:0;
  animation:ld-fade-up .6s .2s var(--ease) forwards;
}

/* Lettres MARLBORO */
.loader-brand-wrap{
  display:flex;gap:.04em;
  font-family:var(--serif);font-size:clamp(3.5rem,9vw,7rem);font-weight:700;
  color:#fff;line-height:1;letter-spacing:.08em;
}
.loader-brand-wrap span{
  display:inline-block;
  opacity:0;transform:translateY(40px) skewX(-6deg);
  animation:ld-letter .5s var(--ease) forwards;
}
.loader-brand-wrap span:nth-child(1){animation-delay:.05s}
.loader-brand-wrap span:nth-child(2){animation-delay:.12s}
.loader-brand-wrap span:nth-child(3){animation-delay:.19s}
.loader-brand-wrap span:nth-child(4){animation-delay:.26s}
.loader-brand-wrap span:nth-child(5){animation-delay:.33s}
.loader-brand-wrap span:nth-child(6){animation-delay:.40s}
.loader-brand-wrap span:nth-child(7){animation-delay:.47s}
.loader-brand-wrap span:nth-child(8){animation-delay:.54s}

/* Barre de progression rouge */
.loader-red-line{
  width:min(320px,70vw);height:2px;
  background:rgba(255,255,255,.08);
  position:relative;overflow:hidden;
  border-radius:2px;
}
.loader-fill{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:linear-gradient(90deg,#800000,var(--accent),#ff4444);
  transition:width .15s linear;
  border-radius:2px;
  box-shadow:0 0 12px 3px rgba(204,0,0,.5);
}

.loader-bottom{
  display:flex;justify-content:space-between;align-items:center;
  width:min(320px,70vw);
  opacity:0;
  animation:ld-fade-up .5s .6s var(--ease) forwards;
}
.loader-tagline{
  font-size:.6rem;letter-spacing:4px;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.loader-pct{
  font-family:var(--serif);font-size:.85rem;font-weight:700;
  color:var(--accent);letter-spacing:2px;min-width:3.5ch;text-align:right;
}

@keyframes ld-letter{
  to{opacity:1;transform:translateY(0) skewX(0)}
}
@keyframes ld-fade-up{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:100;
  padding:1.1rem 0;
  background:rgba(13,13,13,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:all .4s var(--ease);
}
body.light .site-header{background:rgba(245,240,235,.95)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.brand{
  font-family:var(--serif);font-size:1.45rem;font-weight:700;
  letter-spacing:6px;color:var(--accent);transition:opacity .3s;
}
.brand:hover{opacity:.7}
.brand-sub{
  display:block;font-size:.48rem;letter-spacing:4px;text-transform:uppercase;
  color:var(--sub);font-family:var(--font);font-weight:500;text-align:center;
  margin-top:-3px;
}

.main-nav{display:flex;gap:2.5rem}
.main-nav a{
  font-size:.7rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--text2);position:relative;transition:color .3s var(--ease);
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:-4px;
  width:0;height:1px;background:var(--accent);
  transition:width .35s var(--ease);
}
.main-nav a:hover{color:var(--accent)}
.main-nav a:hover::after{width:100%}
.main-nav a.nav-active{color:var(--accent)}
.main-nav a.nav-active::after{width:100%}

.header-actions{display:flex;gap:.5rem;align-items:center}
.hdr-btn{
  width:36px;height:36px;border-radius:50%;
  background:transparent;border:1px solid var(--border2);
  color:var(--text2);display:grid;place-items:center;cursor:pointer;
  transition:all .3s;font-size:.88rem;
}
@media(hover:hover){.hdr-btn{cursor:none}}
.hdr-btn:hover{border-color:var(--accent);color:var(--accent)}
.cart-btn-main{position:relative}
.cart-badge{
  position:absolute;top:-3px;right:-3px;
  min-width:16px;height:16px;border-radius:50%;padding:0 3px;
  background:var(--accent);color:#fff;
  font-style:normal;font-size:.6rem;font-weight:700;
  display:grid;place-items:center;
}

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
.hero{
  position:relative;min-height:100vh;
  display:grid;align-items:center;
  padding:5rem 0 5rem;overflow:hidden;
}
/* Grain texture */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
/* Ligne décorative gauche */
.hero-decor-line{
  position:absolute;left:0;top:15%;height:70%;width:2px;
  background:linear-gradient(to bottom,transparent,var(--accent) 30%,var(--gold) 70%,transparent);
  opacity:.25;
}
.hero-bg{position:absolute;inset:0;z-index:0}

.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:5rem;align-items:center;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.67rem;font-weight:600;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.1rem;
}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--gold);flex-shrink:0}

.hero-title{
  font-family:var(--serif);
  font-size:clamp(2.8rem,5.5vw,5rem);
  font-weight:700;line-height:1.05;letter-spacing:-1.5px;
}
.hero-title em{font-style:italic;color:var(--accent);display:block}

.hero-rule{
  width:48px;height:1px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  margin:1.4rem 0;
}

.hero-desc{color:var(--text2);max-width:420px;font-size:.98rem;line-height:1.8}
.hero-cta{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap;align-items:center}
.hero-note{
  margin-top:1.8rem;font-size:.68rem;letter-spacing:2px;color:var(--sub);
  text-transform:uppercase;display:flex;align-items:center;gap:.5rem;
}
.hero-note::before{content:'';width:14px;height:1px;background:var(--sub)}

/* Visuel cigarette */
.hero-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:500px;
}
.hero-visual-ring{
  position:absolute;border-radius:50%;border:1px solid var(--border);
}
.hero-visual-ring.r1{width:360px;height:360px}
.hero-visual-ring.r2{width:260px;height:260px;border-color:rgba(123,28,46,.08)}
.hero-visual-ring.r3{
  width:160px;height:160px;
  border-color:rgba(184,146,26,.12);
  animation:ring-pulse 4s ease-in-out infinite;
}

.cig-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.cig-smoke{
  position:absolute;bottom:100%;margin-bottom:0;
  left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding-bottom:2px;
}
.cig-smoke span{
  display:block;border-radius:50%;
  background:var(--sub);opacity:0;
  animation:smoke-puff 3s ease-in-out infinite;
}
.cig-smoke span:nth-child(1){width:4px;height:4px;animation-delay:0s}
.cig-smoke span:nth-child(2){width:7px;height:7px;animation-delay:.35s}
.cig-smoke span:nth-child(3){width:11px;height:11px;animation-delay:.7s}
.cig-smoke span:nth-child(4){width:15px;height:15px;animation-delay:1.05s}
.cig-smoke span:nth-child(5){width:20px;height:20px;animation-delay:1.4s}

.cig-ember{
  width:14px;height:5px;border-radius:50%;
  background:radial-gradient(ellipse,#ff7700 10%,#cc3300 60%,transparent);
  box-shadow:0 0 10px 4px rgba(255,80,0,.5),0 0 22px 10px rgba(200,40,0,.22);
  animation:ember-pulse 1.6s ease-in-out infinite;
}
.cig-body{
  width:14px;height:190px;
  background:linear-gradient(to right,#e8e0d0 0%,#fdfaf4 18%,#f5f0e4 60%,#e0d8c8 100%);
  border-radius:7px 7px 2px 2px;
  box-shadow:inset -2px 0 6px rgba(0,0,0,.08),2px 2px 14px rgba(0,0,0,.2);
  position:relative;overflow:hidden;
}
/* Lignes papier */
.cig-body::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,transparent 0,transparent 5px,rgba(0,0,0,.025) 5px,rgba(0,0,0,.025) 6px
  );
}
/* Logo sur la cigarette */
.cig-body::after{
  content:'MARLBORO';position:absolute;
  top:40%;left:50%;transform:translateX(-50%) rotate(90deg);
  font-family:var(--serif);font-size:.35rem;letter-spacing:3px;
  color:rgba(204,0,0,.25);white-space:nowrap;
}
.cig-filter{
  width:14px;height:34px;
  background:linear-gradient(to right,#c8683a 0%,#e08040 45%,#c8683a 100%);
  border-radius:0 0 4px 4px;
  box-shadow:2px 2px 8px rgba(0,0,0,.2);
}
.cig-label{
  position:absolute;right:-80px;top:45%;
  font-family:var(--serif);font-size:.72rem;font-style:italic;
  color:var(--accent);letter-spacing:1px;white-space:nowrap;
  writing-mode:vertical-rl;rotate:180deg;
  opacity:.7;
}

/* Hero marquee */
.hero-marquee{
  position:absolute;bottom:0;left:0;right:0;
  border-top:1px solid var(--border);padding:.5rem 0;overflow:hidden;z-index:1;
}
.marquee-track{
  display:flex;gap:3rem;white-space:nowrap;
  font-size:.62rem;font-weight:600;letter-spacing:5px;text-transform:uppercase;
  color:var(--border2);
  animation:marquee 22s linear infinite;
}

/* ══════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════ */
.stats-bar{
  padding:3rem 0;background:var(--accent);position:relative;z-index:1;
}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stat{padding:1rem;position:relative}
.stat+.stat::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:1px;background:rgba(255,255,255,.2);
}
.stat strong{
  display:block;font-family:var(--serif);font-size:2rem;font-weight:700;color:#fff;
}
.stat span{font-size:.63rem;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:2px}

/* ══════════════════════════════════════════
   SECTIONS COMMUNES
   ══════════════════════════════════════════ */
.section-catalogue,.section-reviews,.section-order,.section-flavors{padding:6rem 0}
.section-catalogue{background:var(--bg)}
.section-reviews{background:var(--accent)}
.section-flavors{background:var(--bg2)}
.section-order{background:var(--bg)}

.sec-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:3rem;gap:1rem;flex-wrap:wrap;
}
.sec-title h2{
  font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;line-height:1.1;
}
.sec-title h2.light-h2{color:#fff}
.sec-title .eyebrow{margin-bottom:.6rem}

/* ══════════════════════════════════════════
   FILTER TABS
   ══════════════════════════════════════════ */
.filter-tabs{
  display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem;
}
.filter-btn{
  padding:.45rem 1.1rem;border-radius:20px;
  border:1px solid var(--border2);background:transparent;
  color:var(--text2);font-size:.65rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:all .3s var(--ease);
}
@media(hover:hover){.filter-btn{cursor:none}}
.filter-btn:hover{border-color:var(--accent);color:var(--accent)}
.filter-btn.active{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.filter-btn[data-filter="gold"].active{background:var(--c-gold);border-color:var(--c-gold)}
.filter-btn[data-filter="silver"].active{background:var(--c-silver);border-color:var(--c-silver);color:#000}
.filter-btn[data-filter="ice"].active{background:var(--c-ice);border-color:var(--c-ice);color:#000}
.filter-btn[data-filter="double"].active{background:var(--c-double);border-color:var(--c-double)}

/* ══════════════════════════════════════════
   PRODUCTS
   ══════════════════════════════════════════ */
.prod-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5rem;
}
.prod-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:0;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}
.prod-card:hover{
  transform:translateY(-7px);
  box-shadow:0 24px 55px rgba(0,0,0,.1);
  border-color:var(--accent);
}
.prod-card-top{height:4px;background:var(--card-color,var(--accent));flex-shrink:0}
.prod-card-body{padding:1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1;position:relative}

/* Badge économies */
.prod-badge{
  position:absolute;top:1rem;right:1rem;
  background:var(--card-color,var(--accent));color:#fff;
  font-size:.58rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:.25rem .55rem;border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* Visuel boîte Marlboro */
.prod-box-visual{
  width:100%;height:90px;
  border-radius:var(--r-sm);
  background:var(--card-color,var(--accent));
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.3rem;
  box-shadow:inset 0 0 30px rgba(0,0,0,.35),0 4px 20px rgba(0,0,0,.4);
}
.prod-box-visual::before{
  content:'MARLBORO';position:absolute;
  font-family:var(--serif);font-weight:700;
  font-size:1.1rem;letter-spacing:5px;color:rgba(255,255,255,.95);
  text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.prod-box-visual::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 50%,rgba(0,0,0,.2) 100%);
}
.prod-box-label{
  position:absolute;bottom:6px;right:8px;
  font-size:.55rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.prod-box-count{
  position:absolute;top:6px;left:8px;
  font-size:.55rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.prod-num{font-size:.6rem;font-weight:700;letter-spacing:3px;color:var(--sub);text-transform:uppercase}
.prod-card h4{font-family:var(--serif);font-size:1.1rem;font-weight:700}
.prod-card .desc{font-size:.83rem;color:var(--text2);flex:1;line-height:1.7}
.prod-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--border);
}
.prod-price{
  font-family:var(--serif);font-size:1.35rem;font-weight:700;
  color:var(--card-color,var(--accent));
}
.prod-price-old{
  font-size:.8rem;color:var(--sub);text-decoration:line-through;
  margin-left:.3rem;font-weight:400;
}
.prod-price-wrap{display:flex;align-items:baseline;gap:.2rem}

/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.8rem;border-radius:var(--r-sm);font-family:var(--font);
  font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  border:0;cursor:pointer;transition:all .3s var(--ease);
}
@media(hover:hover){.btn{cursor:none}}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}

.btn-light{background:var(--accent);color:#fff;box-shadow:0 4px 20px var(--glow)}
.btn-light:hover{background:var(--accent2)}

.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold2)}

.btn-outline{background:transparent;border:1px solid rgba(26,17,8,.3);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

.btn-outline-light{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}

.btn-block{width:100%}
.btn-sm{padding:.6rem 1.2rem;font-size:.65rem}

/* ══════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════ */
.cta-banner{
  padding:5rem 0;
  background:var(--bg2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.cta-banner::before{
  content:'LC';position:absolute;right:2%;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:10rem;font-weight:700;
  color:var(--border);line-height:1;pointer-events:none;user-select:none;
}
.cta-inner{position:relative;z-index:1;max-width:600px}
.cta-inner h2{
  font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;
  margin:.5rem 0 1rem;
}
.cta-inner p{color:var(--text2);font-size:.95rem;margin-bottom:1.5rem}

/* ══════════════════════════════════════════
   GAMMES
   ══════════════════════════════════════════ */
.flavor-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.2rem;
}
.flavor-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1.5rem;display:flex;flex-direction:column;gap:.4rem;
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.flavor-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--fc,var(--accent));
}
.flavor-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.flavor-icon{font-size:1.5rem;margin-bottom:.3rem}
.flavor-card h4{font-family:var(--serif);font-size:.98rem;font-weight:700}
.flavor-card p{font-size:.78rem;color:var(--text2);flex:1;line-height:1.6}

/* ══════════════════════════════════════════
   REVIEWS (fond bordeaux)
   ══════════════════════════════════════════ */
.row-split{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.review-nav{display:flex;gap:.4rem}
.nav-arrow{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:1rem;display:grid;place-items:center;
  cursor:pointer;transition:all .3s;
}
@media(hover:hover){.nav-arrow{cursor:none}}
.nav-arrow:hover{background:rgba(255,255,255,.2)}

.review-card{
  padding:2.5rem;border-radius:var(--r);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  position:relative;overflow:hidden;
}
.review-card::before{
  content:'\201C';position:absolute;top:-20px;right:20px;
  font-family:var(--serif);font-size:9rem;line-height:1;
  color:rgba(255,255,255,.1);pointer-events:none;
}
.review-body{
  font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.8;
  color:rgba(255,255,255,.9);position:relative;z-index:1;
  transition:opacity .25s var(--ease);
}
.review-author{display:flex;gap:.8rem;align-items:center;margin-top:1.5rem;position:relative;z-index:1}
.avatar{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:.9rem;
}
.review-author strong{font-size:.88rem;color:#fff}
.review-author .sub{color:rgba(255,255,255,.5)}

/* Stars */
.review-stars{
  font-size:1rem;letter-spacing:2px;margin-bottom:.6rem;
  color:#f5c518;position:relative;z-index:1;
}

/* Photo colis fictive */
.review-photo-wrap{margin:.8rem 0 1.2rem;position:relative;z-index:1}
.review-photo{
  display:inline-flex;flex-direction:column;justify-content:center;align-items:center;
  gap:.25rem;padding:.9rem 1.4rem;border-radius:8px;border:1px solid rgba(255,255,255,.15);
  min-width:160px;cursor:default;
}
.review-photo-l1{font-size:.9rem;color:rgba(255,255,255,.9);font-weight:600}
.review-photo-l2{font-size:.76rem;color:rgba(255,255,255,.55)}

/* ══════════════════════════════════════════
   ORDER
   ══════════════════════════════════════════ */
.order-box{max-width:580px;margin:0 auto;position:relative}
.order-box::before{
  content:'';position:absolute;left:-2.5rem;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,var(--accent),transparent);
}
.order-box h2{font-family:var(--serif);font-size:2rem;margin-bottom:.3rem}
.order-sub{color:var(--text2);font-size:.88rem;margin-bottom:1.8rem}
.order-form{display:grid;gap:1.2rem}
.fg{display:grid;gap:.4rem}
.fg label{font-size:.65rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.fg input,.fg textarea{
  padding:.85rem 0;font:inherit;color:var(--text);font-size:.9rem;
  border:0;border-bottom:1px solid var(--border2);background:transparent;
  transition:border-color .3s;border-radius:0;
}
.fg input:focus,.fg textarea:focus{outline:none;border-bottom-color:var(--accent)}
.order-msg{margin-top:.8rem;font-weight:600;font-size:.85rem}

/* ══════════════════════════════════════════
   CART PANEL
   ══════════════════════════════════════════ */
.panel-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.35);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.panel-overlay.on{opacity:1;pointer-events:all}

.cart-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:210;
  width:min(390px,92vw);
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .45s var(--ease);
}
.cart-panel::before{
  content:'';position:absolute;left:0;top:10%;height:80%;width:2px;
  background:linear-gradient(to bottom,transparent,var(--accent),transparent);
}
.cart-panel.on{transform:translateX(0)}

.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem 1.6rem;border-bottom:1px solid var(--border);
}
.panel-head h3{font-family:var(--serif);font-size:1.1rem;font-weight:700}

.panel-body{flex:1;overflow-y:auto;padding:1rem 1.6rem;display:grid;gap:.4rem;align-content:start}
.cart-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem 0;border-bottom:1px solid var(--border);
}
.cart-row strong{font-size:.87rem;font-family:var(--serif)}
.cart-row small{color:var(--sub);font-size:.75rem}
.cart-row button{
  background:transparent;color:var(--sub);border:0;
  padding:.3rem;font-size:.85rem;cursor:pointer;transition:color .2s;
}
@media(hover:hover){.cart-row button{cursor:none}}
.cart-row button:hover{color:var(--accent)}

.panel-foot{padding:1.2rem 1.6rem;border-top:1px solid var(--border);display:grid;gap:.7rem}
.panel-total{display:flex;justify-content:space-between;align-items:baseline;padding:.3rem 0}
.panel-total span{font-size:.67rem;letter-spacing:2px;text-transform:uppercase;color:var(--sub)}
.panel-total strong{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--accent)}

/* ══════════════════════════════════════════
   AGE GATE
   ══════════════════════════════════════════ */
.age-gate{
  position:fixed;inset:0;z-index:20000;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;
}
.age-gate.hidden{display:none}
.age-gate-deco{
  font-family:var(--serif);font-size:clamp(5rem,15vw,10rem);font-weight:700;
  color:var(--border);position:absolute;user-select:none;pointer-events:none;
  bottom:0;right:2rem;line-height:1;
}
.age-box{text-align:center;max-width:480px;position:relative;z-index:1}
.age-box .eyebrow{justify-content:center}
.age-box h2{
  font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);
  font-weight:700;line-height:1.1;margin:.8rem 0 .8rem;
}
.age-box h2 em{font-style:italic;color:var(--accent)}
.age-rule{width:40px;height:1px;background:var(--border2);margin:.8rem auto 1.2rem}
.age-desc{font-size:.88rem;color:var(--text2);margin-bottom:2rem;line-height:1.7;max-width:360px;margin-inline:auto}
.age-actions{display:flex;flex-direction:column;gap:.8rem;max-width:300px;margin:0 auto}
.age-legal{margin-top:1.5rem;font-size:.63rem;color:var(--sub);letter-spacing:1px;text-transform:uppercase}
.age-gate,.age-gate *{cursor:auto !important}
.age-gate .btn{cursor:pointer !important}

/* ══════════════════════════════════════════
   NICOTINE WARNING
   ══════════════════════════════════════════ */
.nicotine-warning{background:var(--accent);padding:.5rem 0;text-align:center}
.nicotine-warning p{font-size:.65rem;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,.82);text-transform:uppercase}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.site-footer{padding:3rem 0 2rem;border-top:1px solid var(--border);background:var(--surface)}
.footer-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem}
.footer-brand{
  font-family:var(--serif);font-size:1.4rem;font-weight:700;
  letter-spacing:6px;color:var(--accent);text-align:center;
}
.footer-brand small{
  display:block;font-family:var(--font);font-size:.52rem;
  letter-spacing:4px;color:var(--sub);text-transform:uppercase;font-weight:500;margin-top:2px;
}
.footer-left{font-size:.73rem;color:var(--sub)}
.footer-right{font-size:.73rem;color:var(--sub);text-align:right}

/* ══════════════════════════════════════════
   REVEAL
   ══════════════════════════════════════════ */
.reveal-up{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-up.vis{opacity:1;transform:none}

/* ══════════════════════════════════════════
   COMMANDE CHIFFRÉE
   ══════════════════════════════════════════ */
.encrypted-box{
  margin-top:2rem;
  border:1px solid var(--accent);
  border-radius:var(--r);
  overflow:hidden;
  background:rgba(204,0,0,.04);
}
.enc-header{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--border2);
}
.enc-icon{font-size:1.5rem;flex-shrink:0;line-height:1.2}
.enc-header strong{font-size:.88rem;color:var(--text);display:block;margin-bottom:.25rem}
.enc-header p{font-size:.75rem;color:var(--sub);margin:0;line-height:1.5}
.enc-payload{
  width:100%;
  min-height:90px;
  padding:1rem 1.4rem;
  background:var(--bg2);
  border:0;
  font-family:'Courier New',monospace;
  font-size:.65rem;
  color:var(--accent);
  line-height:1.6;
  resize:vertical;
  word-break:break-all;
  outline:none;
  display:block;
}
.enc-actions{
  display:flex;align-items:center;gap:1rem;
  padding:.8rem 1.4rem;
  border-top:1px solid var(--border);
}
.enc-copy-msg{font-size:.75rem;color:#22c55e;font-weight:600}

/* ══════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════ */
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes card-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ember-pulse{
  0%,100%{opacity:1;box-shadow:0 0 10px 4px rgba(255,80,0,.5),0 0 22px 10px rgba(200,40,0,.22)}
  50%{opacity:.6;box-shadow:0 0 4px 2px rgba(255,80,0,.3),0 0 10px 4px rgba(200,40,0,.1)}
}
@keyframes smoke-puff{
  0%{opacity:0;transform:translateY(0) scale(1) translateX(0)}
  20%{opacity:.4}
  100%{opacity:0;transform:translateY(-65px) scale(2.8) translateX(6px)}
}
@keyframes ring-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}
  50%{transform:translate(-50%,-50%) scale(1.06);opacity:.5}
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:3rem;text-align:center}
  .hero-left{display:flex;flex-direction:column;align-items:center}
  .hero-desc{max-width:100%}
  .eyebrow{justify-content:center}
  .hero-rule{margin-inline:auto}
  .hero-note{justify-content:center}
  .hero-visual{height:360px}
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-left,.footer-right{text-align:center}
}
@media(max-width:768px){
  .main-nav{display:none}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .sec-header,.row-split{flex-direction:column;align-items:flex-start}
  .order-box::before{display:none}
  .cta-banner::before{display:none}
}