/* =========================================================
   Nimbus Vape — Feuille de style principale
   Thème clair, accents jaune / or
   ========================================================= */

:root {
  /* Couleurs */
  --bg:           #ffffff;
  --bg-alt:       #faf8f2;
  --surface:      #ffffff;
  --surface-2:    #f4f1e8;
  --line:         rgba(40, 30, 10, 0.10);
  --line-strong:  rgba(40, 30, 10, 0.20);

  --text:         #1c1810;
  --text-soft:    #5c5647;
  --text-dim:     #8b8474;

  /* Jaunes vifs : réservés aux aplats, jamais au texte sur blanc */
  --lemon:        #fde047;
  --yellow:       #facc15;
  --gold:         #f59e0b;
  --amber-deep:   #d97706;

  /* Or foncé : la seule déclinaison lisible en texte sur fond clair */
  --gold-ink:     #a16207;
  --gold-ink-dk:  #854d0e;

  --danger:       #dc2626;

  /* Dégradé de marque — texte sombre obligatoire par-dessus */
  --grad: linear-gradient(115deg, #fde047 0%, #facc15 42%, #f59e0b 100%);
  /* Variante assombrie, pour le texte en dégradé */
  --grad-ink: linear-gradient(115deg, #d97706 0%, #b45309 55%, #a16207 100%);

  /* Encre posée sur les aplats jaunes */
  --on-yellow:    #1f1704;

  /* Rayons et ombres */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow:    0 14px 40px -14px rgba(60, 45, 10, 0.22);
  --shadow-lg: 0 28px 70px -22px rgba(60, 45, 10, 0.32);
  --glow:      0 10px 30px -10px rgba(245, 158, 11, 0.55);

  /* Rythme */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --pad-section: clamp(4.5rem, 10vw, 8rem);

  /* Hauteur réelle du bandeau d'avertissement, mesurée en JS.
     Elle varie selon que le texte tient sur une, deux ou trois lignes :
     la coder en dur ferait chevaucher l'en-tête sur les écrans étroits.
     La valeur ci-dessous n'est qu'un repli avant l'exécution du script. */
  --bar-h: 30px;
  /* Hauteur de la bande d'en-tête. Le logo (32 px) y étant centré,
     elle détermine seule l'espace libre au-dessus et en dessous. */
  --header-h: 82px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Compense l'en-tête fixe + le bandeau d'avertissement lors des ancres */
  scroll-padding-top: calc(var(--bar-h) + var(--header-h) + 24px);
}

body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Verrouillage du défilement (menu mobile, vérification d'âge).
   `overflow: hidden` seul est ignoré par Safari iOS : il faut figer
   le body en position fixe. Le décalage `top` est posé en JS pour
   conserver la position de lecture, et restauré à la fermeture. */
body.is-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Voile du menu mobile : inactif hors du format téléphone */
.nav-backdrop { display: none; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.15rem; }

::selection { background: var(--yellow); color: var(--on-yellow); }

/* ---------- Barre de défilement ----------
   Deux syntaxes sans équivalence : `scrollbar-color` pour Firefox,
   les pseudo-éléments `::-webkit-` pour Chrome, Edge et Safari. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--surface-2);
}

::-webkit-scrollbar { width: 12px; height: 12px; }

::-webkit-scrollbar-track { background: var(--surface-2); }

::-webkit-scrollbar-thumb {
  /* Couleur unie et non dégradé : un dégradé découpé par un
     border-radius est rendu en octogone (cf. pastille de la FAQ). */
  background-color: var(--gold);
  border-radius: 100px;
  /* Bordure de la couleur du rail : c'est ce qui affine le curseur
     et le détache des bords, `padding` n'ayant pas d'effet ici. */
  border: 3px solid var(--surface-2);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--amber-deep); }

::-webkit-scrollbar-corner { background: var(--surface-2); }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Mise en page ---------- */
.container {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--pad-section); position: relative; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section__head { max-width: 680px; margin-bottom: 3.5rem; }
.section__head p { color: var(--text-soft); font-size: 1.075rem; margin-top: 0.9rem; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.85rem;
}

.section__note {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: center;
}

/* Dégradé assombri : le jaune pur serait illisible en texte sur blanc */
.grad {
  background: var(--grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grid { display: grid; gap: 1.5rem; }

/* ---------- Boutons ---------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--btn-bg);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Encre sombre sur le jaune : du blanc serait illisible */
.btn--primary {
  background: var(--grad);
  color: var(--on-yellow);
  font-weight: 700;
  box-shadow: 0 10px 26px -10px rgba(217, 119, 6, 0.7);
}
.btn--primary:hover { box-shadow: 0 16px 34px -10px rgba(217, 119, 6, 0.85); }

.btn--outline {
  border-color: var(--line-strong);
  color: var(--text);
  background: #fff;
}
.btn--outline:hover { border-color: var(--gold); color: var(--gold-ink); }

.btn--ghost { color: var(--text-soft); }
.btn--ghost:hover { color: var(--text); background: rgba(40, 30, 10, 0.05); }

.btn--sm  { padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.btn--lg  { padding: 1rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* =========================================================
   Vérification de l'âge
   ========================================================= */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(250, 246, 235, 0.78);
  backdrop-filter: blur(18px);
}
.age-gate[hidden] { display: none; }

.age-gate__card {
  max-width: 480px;
  width: 100%;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.age-gate__badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--on-yellow);
  box-shadow: var(--glow);
}

.age-gate__card h2 { font-size: 1.65rem; margin-bottom: 0.85rem; }
.age-gate__card > p { color: var(--text-soft); font-size: 0.975rem; }

.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 1.75rem 0 1.25rem;
}

.age-gate__legal {
  font-size: 0.775rem;
  color: var(--text-dim);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* État « accès refusé » */
.age-gate__card.is-denied .age-gate__badge {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   Bandeau d'avertissement + En-tête
   ========================================================= */
/* Fond sombre volontaire : la marque étant jaune, un bandeau jaune
   se confondrait avec elle et l'avertissement perdrait sa fonction. */
.warning-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  padding: 0.45rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fef3c7;
  background: #1c1810;
}

.header {
  position: fixed;
  /* Se cale sous le bandeau quelle que soit sa hauteur */
  top: var(--bar-h);
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(60, 45, 10, 0.6);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  /* La respiration sous le bandeau vient de la hauteur de la bande,
     jamais d'un padding : un padding décalerait le contenu vers le bas
     au lieu de le laisser centré. */
  height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 700; font-size: 1.15rem; }
.logo__mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--grad);
  box-shadow: var(--glow);
  position: relative;
}
.logo__mark::after {
  content: '';
  position: absolute;
  inset: 9px 14px;
  border-radius: 2px;
  background: var(--on-yellow);
}
.logo__text em { font-style: normal; color: var(--gold-ink); }

.nav { display: flex; align-items: center; gap: 0.4rem; }
.nav a:not(.btn) {
  padding: 0.5rem 0.9rem;
  border-radius: 100px;
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav a:not(.btn):hover { color: var(--text); background: rgba(40, 30, 10, 0.06); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  padding-top: clamp(9rem, 18vw, 12rem);
  padding-bottom: var(--pad-section);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 0%, rgba(250, 204, 21, 0.16), transparent 62%),
    linear-gradient(180deg, #fffbeb 0%, var(--bg) 72%);
}

.hero__glow {
  position: absolute;
  top: -25%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(250, 204, 21, 0.18) 0%, rgba(245, 158, 11, 0.10) 42%, transparent 68%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 3rem;
}

.pill {
  display: inline-block;
  padding: 0.4rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
  box-shadow: 0 4px 14px -8px rgba(60, 45, 10, 0.5);
}

.hero__lead {
  max-width: 52ch;
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-soft);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  list-style: none;
}
.hero__proof li { display: flex; flex-direction: column; }
.hero__proof strong { font-size: 1.5rem; font-weight: 700; }
.hero__proof span { font-size: 0.825rem; color: var(--text-dim); }

/* --- Illustration : dispositif stylisé --- */
/* Boîtier anthracite chaud + e-liquide ambré : l'objet se détache
   du fond clair tout en restant dans la gamme jaune/or. */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 460px;
}

.device {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: float 6s ease-in-out infinite;
}

.device__body {
  position: relative;
  width: 118px;
  height: 210px;
  border-radius: 26px;
  background: linear-gradient(150deg, #4a412c 0%, #2b2618 55%, #1a170e 100%);
  border: 1px solid rgba(253, 224, 71, 0.2);
  box-shadow: 0 30px 60px -18px rgba(60, 45, 10, 0.6), inset 0 1px 1px rgba(253, 224, 71, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 26px;
  order: 2;
}

.device__screen {
  width: 76px;
  height: 62px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 0%, rgba(250, 204, 21, 0.35), #100d05 75%);
  border: 1px solid rgba(250, 204, 21, 0.4);
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: inset 0 0 22px rgba(250, 204, 21, 0.35);
}
.device__watts {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--lemon);
  letter-spacing: -0.04em;
  text-shadow: 0 0 18px rgba(250, 204, 21, 0.9);
}
.device__watts em { font-size: 0.75rem; font-style: normal; margin-left: 2px; }
.device__label {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(253, 224, 71, 0.7);
}

.device__btn {
  width: 40px;
  height: 40px;
  margin-top: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, #6b5c30, #38301a);
  border: 1px solid rgba(253, 224, 71, 0.25);
  box-shadow: 0 0 22px -4px rgba(250, 204, 21, 0.9), inset 0 1px 2px rgba(253, 224, 71, 0.3);
  animation: pulse-btn 3s ease-in-out infinite;
}

/* Réservoir : e-liquide ambré */
.device__tank {
  width: 66px;
  height: 92px;
  order: 1;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(160deg, rgba(253, 224, 71, 0.85), rgba(217, 119, 6, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: none;
  box-shadow: inset 0 -20px 30px -10px rgba(180, 83, 9, 0.7), 0 12px 30px -10px rgba(245, 158, 11, 0.6);
  backdrop-filter: blur(4px);
}

.device__tip {
  width: 22px;
  height: 30px;
  order: 0;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(160deg, #5a4f34, #2b2618);
  border: 1px solid rgba(253, 224, 71, 0.2);
}

/* Halos décoratifs — jaunes pastel */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.55;
  animation: drift 14s ease-in-out infinite;
}
.orb--1 { width: 210px; height: 210px; top: 8%;  left: 2%;  background: rgba(253, 224, 71, 0.75); }
.orb--2 { width: 170px; height: 170px; bottom: 10%; right: 4%; background: rgba(245, 158, 11, 0.5); animation-delay: -5s; }
.orb--3 { width: 130px; height: 130px; top: 46%; right: 24%; background: rgba(250, 204, 21, 0.6); animation-delay: -9s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-22px) rotate(3deg); }
}
@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 0 22px -4px rgba(250, 204, 21, 0.9), inset 0 1px 2px rgba(253, 224, 71, 0.3); }
  50%      { box-shadow: 0 0 40px 2px rgba(250, 204, 21, 1), inset 0 1px 2px rgba(253, 224, 71, 0.3); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(26px, -32px) scale(1.12); }
  66%      { transform: translate(-22px, 22px) scale(0.92); }
}

/* =========================================================
   Bandeau valeurs
   ========================================================= */
.strip {
  padding-block: 1.25rem;
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
}
.strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.strip__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
}
.strip__item span { font-size: 1.1rem; }

/* =========================================================
   Produits
   ========================================================= */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }

.filter {
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter:hover { border-color: var(--gold); color: var(--gold-ink); }
.filter.is-active {
  background: var(--grad);
  border-color: transparent;
  color: var(--on-yellow);
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(217, 119, 6, 0.75);
}

.grid--products { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

.product {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px -12px rgba(60, 45, 10, 0.45);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.product:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: var(--shadow);
}

/* Masquage lors du filtrage */
.product.is-hidden { display: none; }

.product__media {
  position: relative;
  height: 190px;
  display: grid;
  place-items: center;
  font-size: 3.5rem;
  background: radial-gradient(circle at 50% 45%, var(--tint, rgba(250, 204, 21, 0.4)), transparent 68%), var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.product__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, rgba(255, 255, 255, 0.5));
}

.product__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--grad);
  color: var(--on-yellow);
  box-shadow: 0 6px 16px -8px rgba(217, 119, 6, 0.9);
}
.product__badge--soft {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
}

.product__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem; }
.product__title { margin-bottom: 0.4rem; }
.product__desc { font-size: 0.875rem; color: var(--text-soft); flex: 1; }

.product__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.1rem 0;
  list-style: none;
}
.product__specs li {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.7rem;
  color: var(--text-soft);
}

.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.product__price { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; }
.product__price em { font-size: 0.75rem; font-style: normal; font-weight: 500; color: var(--text-dim); }
.product__stock { font-size: 0.78rem; font-weight: 500; color: #15803d; display: flex; align-items: center; gap: 0.35rem; }
.product__stock::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
}
/* Stock faible : rouge brique, le jaune étant devenu la couleur de marque */
.product__stock--low { color: #b91c1c; }
.product__stock--low::before { background: #dc2626; }

/* =========================================================
   E-liquides
   ========================================================= */
.grid--flavors { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.flavor {
  position: relative;
  padding: 2rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px -12px rgba(60, 45, 10, 0.45);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.flavor::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--tint);
  filter: blur(46px);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.flavor:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.flavor:hover::before { opacity: 1; }

/* Gamme chaude : chaque saveur reste identifiable sans sortir du jaune */
.flavor--tabac    { --tint: rgba(180, 83, 9, 0.5); }
.flavor--fruit    { --tint: rgba(234, 88, 12, 0.5); }
.flavor--menthe   { --tint: rgba(190, 220, 40, 0.6); }
.flavor--gourmand { --tint: rgba(250, 204, 21, 0.65); }

.flavor__icon { position: relative; display: block; font-size: 2rem; margin-bottom: 1rem; }
.flavor h3 { position: relative; margin-bottom: 0.5rem; }
.flavor p { position: relative; font-size: 0.875rem; color: var(--text-soft); }
.flavor__count {
  position: relative;
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* --- Échelle de nicotine --- */
.nicotine {
  margin-top: 4rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.nicotine h3 { font-size: 1.4rem; }
.nicotine__intro { margin: 0.5rem 0 2rem; color: var(--text-soft); font-size: 0.95rem; }

.nicotine__scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.nico {
  position: relative;
  padding: 1.35rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-alt);
  overflow: hidden;
}
.nico::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad);
}
.nico:nth-child(1)::before { opacity: 0.35; }
.nico:nth-child(2)::before { opacity: 0.6; }
.nico:nth-child(3)::before { opacity: 0.8; }

.nico__dose {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
}
.nico__dose em { font-size: 0.8rem; font-style: normal; font-weight: 500; color: var(--text-dim); }
.nico__who { font-size: 0.825rem; color: var(--text-soft); }

/* Avertissements : gris ardoise, pour ne pas être confondus
   avec les aplats jaunes devenus décoratifs. */
.nicotine__warn {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(28, 24, 16, 0.18);
  border-left: 4px solid #1c1810;
  background: rgba(28, 24, 16, 0.05);
  font-size: 0.85rem;
  color: #3d3527;
}

/* =========================================================
   Sections scindées (sevrage / boutique)
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split--reverse .split__text { order: 2; }
.split--reverse .split__aside { order: 1; position: sticky; top: 130px; }

.split__text > p {
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: 1.03rem;
  max-width: 58ch;
}
.split__text > .btn { margin-top: 2.5rem; }

/* --- Étapes --- */
.steps { list-style: none; margin-top: 2.75rem; display: grid; gap: 1.5rem; }
.step { display: flex; gap: 1.15rem; align-items: flex-start; }
.step__num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(250, 204, 21, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.45);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gold-ink-dk);
}
.step h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.step p { font-size: 0.9rem; color: var(--text-soft); }

/* --- Encart d'information --- */
.card-info {
  position: sticky;
  top: 130px;
  padding: 2rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.card-info h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.card-info > p { font-size: 0.9rem; color: var(--text-soft); }

.links { list-style: none; margin: 1.5rem 0; display: grid; gap: 1rem; }
.links li {
  display: flex;
  flex-direction: column;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
}
.links strong { font-size: 0.95rem; }
.links span { font-size: 0.82rem; color: var(--text-dim); }

.card-info__foot {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
}

/* =========================================================
   Avis
   ========================================================= */
.grid--reviews { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.review {
  display: flex;
  flex-direction: column;
  padding: 1.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px -12px rgba(60, 45, 10, 0.45);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.review:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow); }

.review__stars { color: var(--gold); letter-spacing: 0.12em; margin-bottom: 1rem; }
.review blockquote { flex: 1; font-size: 0.95rem; color: var(--text-soft); font-style: italic; }
.review blockquote::before { content: '“'; }
.review blockquote::after { content: '”'; }

.review figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.review figcaption strong { font-size: 0.9rem; }
.review figcaption span { font-size: 0.78rem; color: var(--text-dim); }

/* =========================================================
   Boutique : infos, horaires, plan
   ========================================================= */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.info h3 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.4rem;
}
.info p { font-size: 0.95rem; color: var(--text-soft); }
.info a { transition: color 0.2s ease; }
.info a:hover { color: var(--gold-ink-dk); }

.hours {
  width: 100%;
  margin-top: 2.5rem;
  border-collapse: collapse;
  text-align: left;
}
.hours caption {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  padding-bottom: 0.75rem;
}
.hours th, .hours td { padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.925rem; }
.hours th { font-weight: 500; color: var(--text-soft); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours .is-closed { color: var(--text-dim); }

/* --- Plan stylisé --- */
.map {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #f2eee2;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.map__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(60, 45, 10, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 45, 10, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
}
.map__road { position: absolute; background: #ffffff; }
.map__road--h { top: 52%; left: 0; right: 0; height: 26px; }
.map__road--v { left: 38%; top: 0; bottom: 0; width: 20px; }

.map__pin {
  position: absolute;
  top: 52%;
  left: 38%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.map__dot {
  position: relative;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--grad);
  border: 2px solid var(--on-yellow);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.6);
}
.map__pulse {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(4.5); opacity: 0; }
}

.map__label {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px -12px rgba(60, 45, 10, 0.6);
  font-weight: 600;
  font-size: 0.9rem;
}
.map__label em { font-style: normal; font-weight: 400; font-size: 0.78rem; color: var(--text-dim); }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: grid; gap: 0.75rem; }

.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq__item[open] { border-color: rgba(245, 158, 11, 0.5); box-shadow: var(--shadow); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-ink); }

/* Le « + » est dessiné en CSS, pas écrit en texte : un glyphe est calé
   sur la ligne de base de sa police et reste décentré dans un rond,
   quelle que soit la méthode de centrage. Deux barres se centrent au
   pixel près, indépendamment de la police. */
.faq__item summary::after {
  content: '';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
  background-image:
    linear-gradient(currentColor, currentColor),  /* barre horizontale */
    linear-gradient(currentColor, currentColor);  /* barre verticale   */
  background-size: 10px 1.6px, 1.6px 10px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease, background-size 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Ouvert : la barre verticale se rétracte, il ne reste que le « − ».
   Le fond est un aplat uni et non le dégradé de marque : Chrome
   découpe grossièrement une image de fond avec `border-radius` et
   rend un octogone à ce diamètre, y compris sur écran Retina.
   Une `background-color` est découpée en cercle net. À 24 px, le
   dégradé était de toute façon indiscernable. */
.faq__item[open] summary::after {
  transform: rotate(180deg);
  border-color: transparent;
  color: var(--on-yellow);
  background-color: var(--yellow);
  background-size: 10px 1.6px, 0 0;
}

.faq__body { padding: 0 1.5rem 1.35rem; }
.faq__body p { font-size: 0.925rem; color: var(--text-soft); }
.faq__body p + p { margin-top: 0.75rem; }

/* =========================================================
   Pied de page
   ========================================================= */
.footer {
  padding-top: 4.5rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer__brand p {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  color: var(--text-soft);
  max-width: 34ch;
}

.footer__col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__col h3 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.footer__col a, .footer__col p { font-size: 0.875rem; color: var(--text-soft); }
.footer__col a { transition: color 0.2s ease; }
.footer__col a:hover { color: var(--gold-ink); }

.footer__warning {
  padding: 1.5rem;
  border-radius: var(--r);
  border: 1px solid rgba(28, 24, 16, 0.18);
  border-left: 4px solid #1c1810;
  background: rgba(28, 24, 16, 0.05);
}
.footer__warning p { font-size: 0.78rem; color: #3d3527; line-height: 1.7; }
.footer__warning p + p { margin-top: 0.6rem; }
.footer__warning strong { color: #1c1810; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
}
.footer__bottom p { font-size: 0.75rem; color: var(--text-dim); }

/* =========================================================
   Retour en haut de page
   ========================================================= */
/* z-index sous le voile du menu (94) : le bouton s'efface donc
   naturellement quand le tiroir mobile est ouvert.
   Fond en aplat uni et non en dégradé, pour la même raison que la
   pastille de la FAQ : Chrome rend un octogone au lieu d'un cercle
   quand une image de fond est découpée par `border-radius`. */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(180, 83, 9, 0.35);
  border-radius: 50%;
  background-color: var(--yellow);
  color: var(--on-yellow);
  cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(217, 119, 6, 0.85);
  /* Masqué tant qu'on n'a pas défilé ; `visibility` le retire aussi
     du parcours au clavier et des lecteurs d'écran. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s,
              background-color 0.25s ease, box-shadow 0.25s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top.is-visible:hover {
  transform: translateY(-3px);
  background-color: var(--gold);
  box-shadow: 0 16px 32px -8px rgba(217, 119, 6, 1);
}
.to-top:active { transform: translateY(0); }

/* =========================================================
   Apparition au défilement
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  /* Ordre de lecture du desktop conservé : le texte d'abord, la vape ensuite.
     `display: contents` fait des enfants du bloc texte des items de la grille,
     ce qui permet de glisser la vape entre les boutons et les chiffres.
     Le gap passe à 0 : l'espacement vient déjà des marges de chaque bloc. */
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__content { display: contents; }
  .hero .pill    { order: 1; }
  .hero h1       { order: 2; }
  .hero__lead    { order: 3; }
  .hero__actions { order: 4; }
  .hero__visual  { order: 5; min-height: 340px; margin-top: 3rem; }
  .hero__proof   { order: 6; }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__text,
  .split--reverse .split__aside { order: 0; }
  .card-info, .split--reverse .split__aside { position: static; }
  .map { aspect-ratio: 3 / 2; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* Le tiroir étant un enfant de l'en-tête, il faut hisser le bouton
     au-dessus de lui dans le même contexte d'empilement, sans quoi
     la croix de fermeture passe sous le panneau. */
  .burger { display: flex; position: relative; z-index: 96; }

  /* Tiroir latéral : moitié droite de l'écran, pleine hauteur.
     z-index sous l'en-tête (100) et le bandeau (101) : la croix
     reste ainsi visible et cliquable par-dessus le tiroir. */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 95;
    width: 50%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    /* Dégage la hauteur réelle du bandeau + de l'en-tête */
    padding: calc(var(--bar-h) + var(--header-h) + 16px) 1rem 1.5rem;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -22px 0 55px -22px rgba(60, 45, 10, 0.4);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.32s;
  }
  .nav.is-open { visibility: visible; transform: translateX(0); }
  .nav a:not(.btn) { padding: 0.85rem 0.75rem; border-radius: var(--r-sm); }
  .nav .btn { margin-top: 0.75rem; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 94;
    background: rgba(28, 24, 16, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .strip__inner { justify-content: flex-start; }
  .hero__actions .btn { width: 100%; }

  /* ---- Toujours deux cases par ligne, quelle que soit la largeur ----
     Les colonnes sont figées à 1fr 1fr : sur un écran de 320 px chaque
     case tombe à ~145 px, d'où le contenu resserré ci-dessous. */
  .grid--products,
  .grid--flavors {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
  }

  /* Les cases devenant étroites, on autorise la césure des libellés
     longs (« Nimbus Pod Start — Pack sevrage ») plutôt qu'un débordement. */
  .product__title,
  .flavor h3 { overflow-wrap: anywhere; hyphens: auto; }

  .product__media { height: 118px; font-size: 2.1rem; }
  .product__badge { top: 0.5rem; left: 0.5rem; padding: 0.2rem 0.5rem; font-size: 0.58rem; }
  .product__body { padding: 0.85rem; }
  .product__title { font-size: 0.92rem; }
  .product__desc { font-size: 0.78rem; }
  .product__specs { gap: 0.25rem; margin: 0.7rem 0; }
  .product__specs li { padding: 0.15rem 0.4rem; font-size: 0.62rem; }

  /* Prix et stock passent l'un sous l'autre : côte à côte, ils se
     chevaucheraient sur cette largeur. */
  .product__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding-top: 0.8rem;
  }
  .product__price { font-size: 1.1rem; }
  .product__stock { font-size: 0.7rem; }

  .flavor { padding: 1.2rem 0.9rem; }
  .flavor__icon { font-size: 1.5rem; margin-bottom: 0.6rem; }
  .flavor h3 { font-size: 0.98rem; }
  .flavor p { font-size: 0.78rem; }
  .flavor__count { margin-top: 0.8rem; font-size: 0.68rem; }

  /* ---- Pied de page centré ---- */
  .footer { text-align: center; }
  .footer__top { grid-template-columns: 1fr; justify-items: center; }
  .footer__brand .logo { justify-content: center; }
  .footer__brand p { margin-inline: auto; }
  .footer__col { align-items: center; }
  .footer__bottom { flex-direction: column; align-items: center; }

  /* Les mentions légales gardent l'alignement à gauche : ce sont des
     paragraphes de plusieurs lignes, illisibles une fois centrés. */
  .footer__warning { text-align: left; }
}

/* =========================================================
   Accessibilité : mouvement réduit
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}