/* =========================================================================
   VAPEASY — feuille de style unique.

   Fond clair pour que les photos produit respirent, couleur franche partout
   où elle porte une information : famille d'arôme, économie réalisée,
   progression vers un palier, disponibilité.
   ========================================================================= */

:root {
  --encre:      #14161a;
  --encre-2:    #3d434d;
  --gris:       #6b7280;
  --gris-clair: #9aa1ac;
  --trait:      #e6e4df;
  --fond:       #ffffff;
  --fond-2:     #f8f7f4;
  --fond-3:     #edeae3;

  --accent:     #ff3b14;
  --accent-s:   #e12f0c;
  --accent-pale:#fff1ed;

  --vert:       #0f7b4f;
  --vert-vif:   #14a06a;
  --vert-pale:  #e7f6ee;
  --bleu:       #2563eb;
  --bleu-pale:  #eaf0ff;
  --violet:     #6d28d9;
  --violet-pale:#f2ecff;
  --ambre:      #b45309;
  --ambre-pale: #fff4e0;
  --rose:       #be123c;
  --rose-pale:  #ffecf0;

  /* Familles d'arômes : la même couleur du catalogue à la fiche produit. */
  --f-fruite:   #e11d48;
  --f-menthol:  #0891b2;
  --f-gourmand: #b45309;
  --f-classic:  #57534e;

  --r:    14px;
  --r-s:  9px;
  --ombre:    0 1px 2px rgba(20,22,26,.05), 0 4px 14px rgba(20,22,26,.05);
  --ombre-f:  0 4px 10px rgba(20,22,26,.07), 0 18px 40px rgba(20,22,26,.10);

  --largeur: 1280px;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* `display:block` sur img l'emporterait sur la règle [hidden] du navigateur :
   sans ça, une image cassée occuperait encore la place de son repli. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.16; letter-spacing: -.022em; font-weight: 800; }
h1 { font-size: clamp(28px, 4.2vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 32px); }
h3 { font-size: 19px; }
p  { margin: 0 0 1em; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.etroit    { max-width: 780px; }

/* ---------- Bandeau d'annonce -------------------------------------------- */
.annonce {
  background: linear-gradient(90deg, #14161a 0%, #241a17 55%, #3a1409 100%);
  color: #fff; font-size: 13px; font-weight: 600; overflow: hidden;
}
.annonce__piste {
  display: flex; gap: 42px; padding: 9px 20px; justify-content: center;
  white-space: nowrap; align-items: center;
}
.annonce b { color: #ffc5b6; }
.annonce .cutoff { color: #ffd9cf; }
@media (max-width: 899px) {
  .annonce__piste { gap: 0; }
  .annonce__piste > span:nth-child(n+2) { display: none; }
}

/* ---------- En-tête ------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete__haut {
  display: flex; align-items: center; gap: 20px;
  padding: 13px 20px; max-width: var(--largeur); margin: 0 auto;
}
.logo { font-size: 25px; font-weight: 900; letter-spacing: -.045em; color: var(--encre); flex: none; }
.logo span { color: var(--accent); }
.logo small {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--gris-clair); text-transform: uppercase; margin-top: -4px;
}

.recherche { flex: 1; position: relative; max-width: 540px; }
.recherche input {
  width: 100%; padding: 11px 14px 11px 40px;
  border: 1.5px solid var(--trait); border-radius: 999px;
  background: var(--fond-2); font-size: 15px; font-family: inherit; color: var(--encre);
}
.recherche input:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px var(--accent-pale);
}
.recherche svg { position: absolute; left: 14px; top: 12px; opacity: .45; }
.recherche__res {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--r);
  box-shadow: var(--ombre-f); max-height: 62vh; overflow: auto; display: none; z-index: 70;
}
.recherche__res.ouvert { display: block; }
.recherche__res a {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--fond-2); font-size: 14px;
}
.recherche__res a:last-child { border-bottom: 0; }
.recherche__res a:hover { background: var(--fond-2); color: inherit; }
.recherche__res .r-prix { margin-left: auto; font-weight: 800; white-space: nowrap; }
.recherche__res .r-vide { padding: 14px; color: var(--gris); font-size: 14px; }

.actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.nav { border-top: 1px solid var(--trait); background: #fff; }
.nav__piste {
  display: flex; gap: 2px; max-width: var(--largeur); margin: 0 auto;
  padding: 0 12px; overflow-x: auto; scrollbar-width: none;
}
.nav__piste::-webkit-scrollbar { display: none; }
.nav__piste a {
  padding: 11px 12px; font-size: 14.5px; font-weight: 650; white-space: nowrap;
  color: var(--encre-2); border-bottom: 2.5px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav__piste a:hover { color: var(--accent); }
.nav__piste a.actif { color: var(--encre); border-bottom-color: var(--accent); }
.nav__piste a.promo { color: var(--accent); font-weight: 750; }
.pastille-nav {
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 999px; padding: 2px 6px; letter-spacing: .03em;
}

/* ---------- Boutons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--p { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(255,59,20,.22); }
.btn--p:hover { background: var(--accent-s); color: #fff; box-shadow: 0 6px 20px rgba(255,59,20,.32); }
.btn--n { background: var(--encre); color: #fff; }
.btn--n:hover { background: #000; color: #fff; }
.btn--v { background: var(--vert); color: #fff; }
.btn--v:hover { background: #0c6741; color: #fff; }
.btn--f { background: #fff; color: var(--encre); border-color: var(--trait); }
.btn--f:hover { border-color: var(--encre); color: var(--encre); }
.btn--bloc { width: 100%; }
.btn--g { padding: 15px 26px; font-size: 16.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- Panier (compteur, tiroir) ------------------------------------- */
.panier-btn { position: relative; }
.panier-compte {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; display: none; align-items: center;
  justify-content: center; padding: 0 5px; border: 2px solid #fff;
}
.panier-compte.visible { display: flex; }

.voile {
  position: fixed; inset: 0; background: rgba(20,22,26,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 90;
}
.voile.ouvert { opacity: 1; pointer-events: auto; }

.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%);
  background: #fff; z-index: 100; transform: translateX(100%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.tiroir.ouvert { transform: none; }
.tiroir__haut {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 20px; border-bottom: 1px solid var(--trait);
}
.tiroir__haut h3 { margin: 0; font-size: 18px; }
.tiroir__corps { flex: 1; overflow: auto; padding: 4px 20px 12px; }
.tiroir__bas { border-top: 1px solid var(--trait); padding: 15px 20px; background: var(--fond-2); }
.x {
  border: 0; background: var(--fond-2); width: 32px; height: 32px;
  border-radius: 999px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--encre-2);
}
.x:hover { background: var(--fond-3); }

.pl {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--fond-2); align-items: center;
}
.pl--lie { padding-top: 0; border-top: 0; opacity: .95; }
.pl__img { width: 58px; height: 58px; border-radius: var(--r-s); background: var(--fond-2); object-fit: contain; padding: 4px; }
.pl__nom { font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.pl__meta { font-size: 12px; color: var(--gris); margin-top: 2px; }
.pl__prix { font-weight: 800; font-size: 14.5px; white-space: nowrap; text-align: right; }
.pl__sup { background: none; border: 0; color: var(--gris-clair); cursor: pointer; font-size: 12px; padding: 2px 0; text-decoration: underline; }
.pl__sup:hover { color: var(--accent); }
.etiq-lot {
  display: inline-block; background: var(--vert-pale); color: var(--vert);
  font-weight: 750; font-size: 11px; padding: 1px 7px; border-radius: 999px;
}
.etiq-nico {
  display: inline-block; background: var(--bleu-pale); color: var(--bleu);
  font-weight: 750; font-size: 11px; padding: 1px 7px; border-radius: 999px;
}

.qte {
  display: inline-flex; align-items: center; border: 1.5px solid var(--trait);
  border-radius: 999px; overflow: hidden; background: #fff;
}
.qte button { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--encre-2); line-height: 1; }
.qte button:hover { background: var(--fond-2); }
.qte span { min-width: 28px; text-align: center; font-weight: 700; font-size: 14px; }

.total-l { display: flex; justify-content: space-between; font-size: 14.5px; padding: 4px 0; color: var(--encre-2); }
.total-l--g { font-size: 20px; font-weight: 800; color: var(--encre); padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--trait); }
.eco {
  background: var(--vert-pale); color: var(--vert); font-weight: 750;
  border-radius: var(--r-s); padding: 9px 12px; font-size: 13.5px; margin: 10px 0;
  display: flex; gap: 8px; align-items: center;
}

/* ---------- Jauge de port offert ------------------------------------------ */
.jauge { margin: 10px 0 12px; }
.jauge__t { font-size: 13px; font-weight: 650; color: var(--encre-2); margin-bottom: 6px; }
.jauge__t b { color: var(--accent); }
.jauge__piste { height: 7px; border-radius: 999px; background: var(--fond-3); overflow: hidden; }
.jauge__barre {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, #ff7a3d 100%);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.jauge--ok .jauge__barre { background: linear-gradient(90deg, var(--vert) 0%, var(--vert-vif) 100%); }
.jauge--ok .jauge__t { color: var(--vert); }
.jauge--ok .jauge__t b { color: var(--vert); }

/* ---------- Grille produits ----------------------------------------------- */
.grille { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); }
@media (max-width: 560px) { .grille { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.carte {
  border: 1px solid var(--trait); border-radius: var(--r); background: #fff;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.carte::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--fam, var(--trait)); z-index: 3;
}
.carte:hover { box-shadow: var(--ombre-f); transform: translateY(-3px); border-color: #d8d5cf; }
.carte__img {
  aspect-ratio: 1/1; background: var(--fond-2); position: relative;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.carte__img img { width: 100%; height: 100%; object-fit: contain; }
.carte__repli {
  font-weight: 900; font-size: 13px; letter-spacing: .05em; color: #fff;
  text-align: center; padding: 10px; text-transform: uppercase;
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; border-radius: var(--r-s);
}
.carte__corps { padding: 12px 13px 14px; display: flex; flex-direction: column; flex: 1; }
.carte__marque { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gris-clair); margin-bottom: 3px; }
.carte__nom {
  font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--encre);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 8px; min-height: 2.7em;
}
.carte__bas { margin-top: auto; }
.carte__prix { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.prix-u { font-size: 21px; font-weight: 900; letter-spacing: -.03em; }
.prix-lot { font-size: 12.5px; color: var(--vert); font-weight: 750; }
/* Pas de texte barré : un prix barré laisse entendre une remise sur notre
   propre prix antérieur. Ici c'est une comparaison, et elle est nommée. */
.carte__ref { font-size: 11.5px; color: var(--gris-clair); margin-top: 3px; }
.carte__taux { font-size: 11.5px; color: var(--gris); margin-top: 5px; }
.carte__ajout {
  margin-top: 10px; width: 100%; padding: 8px; border-radius: 999px;
  border: 1.5px solid var(--trait); background: #fff; font: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; color: var(--encre);
}
.carte__ajout:hover { background: var(--encre); border-color: var(--encre); color: #fff; }

.pastille {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
}
.pastille--lot   { background: var(--encre); color: #fff; }
.pastille--eco   { background: var(--vert); color: #fff; }
.pastille--sel   { background: var(--violet-pale); color: var(--violet); }
.pastille--rupt  { background: var(--fond-3); color: var(--gris); }
.pastille--d     { left: auto; right: 10px; }

/* ---------- Bandeau de page ----------------------------------------------- */
.bandeau { color: #fff; padding: 34px 0 30px; position: relative; overflow: hidden; }
.bandeau::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 300px at 88% 10%, rgba(255,255,255,.20), transparent 65%);
  pointer-events: none;
}
.bandeau .conteneur { position: relative; z-index: 1; }
.bandeau h1 { color: #fff; margin-bottom: 8px; }
.bandeau p { color: rgba(255,255,255,.88); max-width: 68ch; font-size: 16.5px; margin: 0; }
.bandeau .fil, .bandeau .fil a, .bandeau .fil span { color: rgba(255,255,255,.72); }
.bandeau .fil a:hover { color: #fff; }
.bandeau__chiffres { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; }
.bandeau__chiffres div { color: #fff; }
.bandeau__chiffres b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.bandeau__chiffres span { font-size: 12.5px; color: rgba(255,255,255,.78); }

/* ---------- Fiche produit -------------------------------------------------- */
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 899px) { .fiche { grid-template-columns: 1fr; gap: 26px; } }

.fiche__visuel {
  background: var(--fond-2); border-radius: var(--r); padding: 34px;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1/1; position: sticky; top: 112px;
}
@media (max-width: 899px) { .fiche__visuel { position: static; aspect-ratio: 4/3; padding: 20px; } }
.fiche__visuel img { max-height: 100%; width: auto; object-fit: contain; }

.fil { font-size: 12.5px; color: var(--gris); margin-bottom: 14px; }
.fil a { color: var(--gris); }
.fil a:hover { color: var(--accent); }

.marque-l { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }

.etiquettes { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.etiquette {
  font-size: 11.5px; font-weight: 750; padding: 4px 10px; border-radius: 999px;
  background: var(--fond-2); color: var(--encre-2);
}
.etiquette--fam { background: color-mix(in srgb, var(--fam) 12%, white); color: var(--fam); }
.etiquette--v { background: var(--vert-pale); color: var(--vert); }
.etiquette--b { background: var(--bleu-pale); color: var(--bleu); }

.bloc-prix {
  border: 1.5px solid var(--trait); border-radius: var(--r);
  padding: 18px 20px; margin: 16px 0; background: linear-gradient(180deg, #fff, var(--fond-2));
}
.bloc-prix__l1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bloc-prix .gros { font-size: 38px; font-weight: 900; letter-spacing: -.035em; }
.bloc-prix .unite { font-size: 14px; color: var(--gris); }
.bloc-prix__lot { margin-top: 8px; font-size: 14.5px; font-weight: 750; color: var(--vert); }
.bloc-prix__ref { margin-top: 6px; font-size: 12.5px; color: var(--gris); }
.eco-badge {
  background: var(--vert); color: #fff; font-weight: 800; font-size: 12px;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .02em;
}

.champ { margin: 18px 0; }
.champ__t { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: 9px; display: flex; gap: 8px; align-items: baseline; }
.champ__t .aide { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bleu); cursor: help; }

.taux { display: flex; gap: 8px; flex-wrap: wrap; }
.taux button {
  padding: 9px 15px; border: 1.5px solid var(--trait); border-radius: 999px;
  background: #fff; font: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; color: var(--encre);
}
.taux button:hover { border-color: var(--encre-2); }
.taux button[aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: #fff; }
.taux button[data-rupture="1"] { opacity: .38; text-decoration: line-through; cursor: not-allowed; }

.lots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
@media (max-width: 420px) { .lots { grid-template-columns: 1fr; } }
.lot-choix {
  border: 1.5px solid var(--trait); border-radius: var(--r-s); padding: 10px 12px;
  background: #fff; cursor: pointer; text-align: left; font: inherit; position: relative;
}
.lot-choix:hover { border-color: var(--encre-2); }
.lot-choix[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-pale); }
.lot-choix b { display: block; font-size: 14.5px; font-weight: 800; }
.lot-choix span { display: block; font-size: 12px; color: var(--gris); margin-top: 1px; }
.lot-choix em {
  font-style: normal; display: block; font-size: 11.5px; font-weight: 750;
  color: var(--vert); margin-top: 3px;
}
.lot-choix .meilleur {
  position: absolute; top: -9px; right: 8px; background: var(--vert); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}

.nico-calc {
  margin-top: 10px; background: var(--bleu-pale); border-radius: var(--r-s);
  padding: 11px 13px; font-size: 13.5px; color: #1e3a8a; line-height: 1.5;
}
.nico-calc b { color: #17307a; }
.nico-calc .prix { float: right; font-weight: 800; }

.achat { display: flex; gap: 12px; align-items: center; margin: 18px 0 14px; }
.achat .qte { height: 50px; }
.achat .qte button { width: 42px; height: 48px; font-size: 18px; }
.achat .qte span { min-width: 36px; font-size: 16px; }

.rassure { display: grid; gap: 10px; margin-top: 20px; }
.rassure div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--encre-2); }
.rassure b { color: var(--encre); }
.rassure svg { flex: none; margin-top: 3px; color: var(--vert); }

/* ---------- Barre d'achat collante (mobile) -------------------------------- */
.barre-achat {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--trait); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 12px; align-items: center; box-shadow: 0 -6px 24px rgba(20,22,26,.10);
}
.barre-achat .p { font-weight: 900; font-size: 19px; white-space: nowrap; }
.barre-achat .s { font-size: 11.5px; color: var(--gris); }
.barre-achat .btn { flex: 1; }
@media (max-width: 899px) { .barre-achat.active { display: flex; } }

/* ---------- Prose et tableaux ---------------------------------------------- */
.prose { color: var(--encre-2); font-size: 15.5px; }
.prose h2 { font-size: 23px; margin-top: 1.6em; color: var(--encre); }
.prose h3 { font-size: 17px; margin-top: 1.5em; color: var(--encre); }
.prose ul { padding-left: 20px; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.tableau { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 1em 0; }
.tableau th, .tableau td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--trait); }
.tableau thead th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.tableau td:last-child, .tableau th:last-child { text-align: right; }
.tableau tbody tr:hover { background: var(--fond-2); }
.tableau .sur { background: var(--vert-pale); }
.defile { overflow-x: auto; }

details.faq {
  border: 1px solid var(--trait); border-radius: var(--r-s);
  padding: 0 14px; margin-bottom: 8px; background: #fff;
}
details.faq summary {
  cursor: pointer; font-weight: 700; font-size: 15px; padding: 13px 0;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--accent); font-size: 19px; line-height: 1; }
details.faq[open] summary::after { content: "−"; }
details.faq p { font-size: 14.5px; color: var(--encre-2); margin: 0 0 13px; }

/* ---------- Sections -------------------------------------------------------- */
.section { padding: 52px 0; }
.section--gris { background: var(--fond-2); }
.section--pale { background: var(--accent-pale); }
.section__t { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.section__t p { margin: 4px 0 0; color: var(--gris); font-size: 15px; }
.section__t h2 { margin: 0; }
.lien-f { font-size: 14.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ---------- Héros ----------------------------------------------------------- */
.heros {
  background:
    radial-gradient(800px 400px at 12% 0%, #fff2ee 0%, transparent 62%),
    radial-gradient(700px 420px at 92% 100%, #eaf4ff 0%, transparent 60%),
    var(--fond-2);
  border-bottom: 1px solid var(--trait);
}
.heros__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: center; padding: 54px 20px; max-width: var(--largeur); margin: 0 auto; }
@media (max-width: 899px) { .heros__in { grid-template-columns: 1fr; padding: 32px 20px; gap: 26px; } }
.heros h1 { font-size: clamp(32px, 5.2vw, 55px); margin-bottom: 14px; }
.heros h1 em { font-style: normal; color: var(--accent); }
.heros__st { font-size: 17.5px; color: var(--encre-2); max-width: 52ch; }
.heros__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.heros__preuve { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 24px; }
.heros__preuve div b { display: block; font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.heros__preuve div span { font-size: 12.5px; color: var(--gris); }

.grille-prix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tuile {
  background: #fff; border: 1.5px solid var(--trait); border-radius: var(--r);
  padding: 15px 16px; transition: box-shadow .16s, transform .16s, border-color .16s;
  position: relative; overflow: hidden;
}
.tuile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ton, var(--accent)); }
.tuile:hover { box-shadow: var(--ombre-f); transform: translateY(-3px); border-color: var(--ton, var(--accent)); }
.tuile__t { font-size: 13px; font-weight: 750; color: var(--encre-2); }
.tuile__p { font-size: 28px; font-weight: 900; letter-spacing: -.035em; margin: 3px 0 2px; }
.tuile__l { font-size: 12.5px; color: var(--vert); font-weight: 750; }
.tuile__ref { font-size: 11.5px; color: var(--gris-clair); margin-top: 2px; }

/* ---------- Arguments -------------------------------------------------------- */
.args { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 899px) { .args { grid-template-columns: repeat(2, 1fr); } }
.arg { background: #fff; border: 1px solid var(--trait); border-radius: var(--r); padding: 18px; }
.arg i {
  display: inline-flex; width: 38px; height: 38px; border-radius: 11px;
  align-items: center; justify-content: center; margin-bottom: 10px;
  background: var(--ton-pale, var(--accent-pale)); color: var(--ton, var(--accent));
}
.arg b { display: block; font-size: 15px; margin-bottom: 3px; }
.arg span { font-size: 13.5px; color: var(--gris); line-height: 1.5; }

/* ---------- Filtres, tri, pagination ----------------------------------------- */
.barre-outils {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 16px 0 20px; justify-content: space-between;
}
.filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.puce {
  padding: 7px 14px; border: 1.5px solid var(--trait); border-radius: 999px;
  font-size: 13.5px; font-weight: 650; background: #fff; color: var(--encre-2);
  cursor: pointer; display: inline-flex; gap: 7px; align-items: center;
}
.puce:hover { border-color: var(--encre-2); color: var(--encre); }
.puce.actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.puce i { width: 9px; height: 9px; border-radius: 999px; background: var(--fam, var(--gris-clair)); display: inline-block; }
.tri { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--gris); }
.tri select {
  padding: 7px 12px; border: 1.5px solid var(--trait); border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 650; background: #fff; color: var(--encre);
}

.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 40px 0 10px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--r-s); font-size: 14.5px;
  font-weight: 700; border: 1px solid var(--trait); padding: 0 10px;
}
.pagination a:hover { border-color: var(--encre); color: var(--encre); }
.pagination .actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.pagination .gap { border: 0; }

/* ---------- Formulaires -------------------------------------------------------- */
.form { display: grid; gap: 14px; }
.form label { font-size: 13px; font-weight: 700; color: var(--encre-2); display: block; margin-bottom: 5px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 13px; border: 1.5px solid var(--trait);
  border-radius: var(--r-s); font: inherit; font-size: 15px; background: #fff; color: var(--encre);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale);
}
.form .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form .duo { grid-template-columns: 1fr; } }
.form .err { color: var(--accent); font-size: 13.5px; font-weight: 650; }
.coche { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--encre-2); }
.coche input { width: auto; margin-top: 3px; flex: none; }

.marques-paiement { display: flex; gap: 7px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.marques-paiement span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--gris);
  border: 1px solid var(--trait); border-radius: 5px; padding: 3px 7px; background: #fff;
}

/* ---------- Encarts --------------------------------------------------------- */
.encart { border: 1px solid var(--trait); border-radius: var(--r); padding: 18px 20px; background: var(--fond-2); }
.encart--jaune { background: var(--ambre-pale); border-color: #f2ddb4; }
.encart--vert  { background: var(--vert-pale); border-color: #c4e6d5; }
.encart--bleu  { background: var(--bleu-pale); border-color: #cfdcff; }
.encart--rouge { background: var(--accent-pale); border-color: #ffd3c7; }

/* ---------- Étapes ----------------------------------------------------------- */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: e; }
@media (max-width: 760px) { .etapes { grid-template-columns: 1fr; } }
.etape { position: relative; padding-left: 48px; }
.etape::before {
  counter-increment: e; content: counter(e);
  position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.etape b { display: block; font-size: 16px; margin-bottom: 3px; }
.etape span { font-size: 14px; color: var(--gris); }

/* ---------- Pied ------------------------------------------------------------- */
.pied { background: var(--encre); color: #c9ccd2; margin-top: 60px; padding: 48px 0 26px; font-size: 14px; }
.pied a { color: #c9ccd2; }
.pied a:hover { color: #fff; }
.pied__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
@media (max-width: 899px) { .pied__cols { grid-template-columns: 1fr 1fr; gap: 26px; } }
.pied h4 { color: #fff; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 12px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied .logo { color: #fff; }
.pied__bas { border-top: 1px solid #2a2e35; margin: 34px auto 0; padding: 20px 20px 0; max-width: var(--largeur); font-size: 12.5px; color: #8b919b; }
.pied__legal { margin-top: 10px; line-height: 1.65; }

/* ---------- Pop-up majorité --------------------------------------------------- */
.age { position: fixed; inset: 0; z-index: 200; background: rgba(20,22,26,.75); display: none; align-items: center; justify-content: center; padding: 20px; }
.age.ouvert { display: flex; }
.age__b { background: #fff; border-radius: 18px; max-width: 430px; width: 100%; padding: 30px 28px; text-align: center; box-shadow: var(--ombre-f); }
.age__b .logo { font-size: 26px; margin-bottom: 12px; }
.age__b h2 { font-size: 24px; margin-bottom: 10px; }
.age__b p { color: var(--encre-2); font-size: 15px; }
.age__b .mini { font-size: 12.5px; color: var(--gris); margin: 14px 0 0; }

/* ---------- Divers ------------------------------------------------------------ */
.muet   { color: var(--gris); }
.centre { text-align: center; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.pile { display: grid; gap: 12px; }
.rangee { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cache-mob { display: inline-flex; }
@media (max-width: 899px) { .cache-mob { display: none !important; } }
.only-mob { display: none; }
@media (max-width: 899px) { .only-mob { display: block; } }

.liens-nuage { display: flex; flex-wrap: wrap; gap: 8px; }
.liens-nuage a { font-size: 13.5px; padding: 6px 12px; border: 1px solid var(--trait); border-radius: 999px; background: #fff; color: var(--encre-2); }
.liens-nuage a:hover { border-color: var(--encre); color: var(--encre); }

.vide { text-align: center; padding: 60px 20px; color: var(--gris); }

/* =========================================================================
   MOBILE

   Le téléphone est l'écran majoritaire sur ce type de boutique. Ce qui suit
   n'est pas un rattrapage : c'est là que les décisions de mise en page se
   jouent réellement.
   ========================================================================= */

/* Un champ de formulaire sous 16 px déclenche le zoom automatique de Safari
   iOS à la mise au point, et l'utilisateur se retrouve avec une page de
   travers. C'est la règle la plus souvent oubliée du web mobile. */
.form input, .form select, .form textarea,
.recherche input, .tri select { font-size: 16px; }

/* Le halo bleu de tap iOS sur des boutons déjà stylés fait bricolage. */
a, button { -webkit-tap-highlight-color: transparent; }

/* Fiche produit : le nom d'abord, la photo ensuite, le prix après.
   Sur desktop, le nom retrouve sa place au-dessus du prix, à droite. */
.fiche--produit {
  grid-template-areas: "visuel titre" "visuel infos";
  align-items: start;
}
.fiche--produit > .fiche__titre  { grid-area: titre; }
.fiche--produit > .fiche__visuel { grid-area: visuel; }
.fiche--produit > .fiche__infos  { grid-area: infos; }

@media (max-width: 899px) {
  .fiche--produit {
    grid-template-columns: 1fr;
    grid-template-areas: "titre" "visuel" "infos";
    gap: 18px;
  }
  .fiche--produit h1 { font-size: 27px; }
  .fiche--produit .fiche__visuel { aspect-ratio: 1/1; padding: 24px; }

  /* En-tête sur deux lignes : la recherche a besoin de toute la largeur,
     sinon elle affiche trois lettres de son invite. */
  .entete__haut {
    flex-wrap: wrap; gap: 10px 12px; padding: 11px 16px;
  }
  .logo { font-size: 22px; }
  .recherche { order: 3; flex: 1 0 100%; max-width: none; }
  .actions { gap: 6px; }

  .bandeau { padding: 22px 0 20px; }
  .bandeau p { font-size: 15.5px; }
  .bandeau__chiffres {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px;
  }
  .bandeau__chiffres b { font-size: 19px; }

  /* Les filtres défilent horizontalement au lieu d'empiler trois rangées
     qui repoussent les produits sous la ligne de flottaison. */
  /* flex-wrap hérité + direction colonne = enroulement en colonnes, donc un
     conteneur plus large que l'écran. Il faut le neutraliser explicitement. */
  .barre-outils {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: 12px; padding: 14px 0 16px;
  }
  .tri { min-width: 0; }
  /* Le rail défile sur lui-même ; pas de marge négative, qui ferait
     déborder le document entier vers la droite. */
  .filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .filtres::-webkit-scrollbar { display: none; }
  .puce { flex: none; min-height: 38px; }
  .tri { justify-content: flex-end; }
  .tri select { min-height: 40px; }

  /* Vignettes : plus rien sous 12 px, et une seule ligne pour la comparaison. */
  .grille { gap: 12px; }
  .carte__corps { padding: 11px 11px 13px; }
  .carte__nom { font-size: 14.5px; }
  .carte__marque { font-size: 11px; }
  .carte__ref, .carte__taux {
    font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .carte__ajout { min-height: 40px; margin-top: 9px; }
  .prix-u { font-size: 20px; }

  /* Les trois quantités restent côte à côte : empilées, elles repoussaient
     le bouton d'achat de 200 px vers le bas. */
  .lots { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .lot-choix { padding: 9px 8px; text-align: center; }
  .lot-choix b { font-size: 13.5px; }
  .lot-choix span { font-size: 11.5px; }
  .lot-choix em { font-size: 11.5px; }
  /* Centrée en absolu, la pastille recouvrait le libellé de la quantité.
     Sur mobile elle prend sa place dans le flux. */
  .lot-choix .meilleur {
    position: static; display: inline-block; margin-bottom: 4px; font-size: 9px;
  }

  .taux button { min-height: 42px; }
  .achat .qte button { width: 44px; }
  .achat .btn--g { padding: 15px 14px; font-size: 15.5px; white-space: nowrap; }

  .heros__in { padding: 26px 16px 30px; }
  .heros__preuve { gap: 16px 22px; }
  .section { padding: 38px 0; }
  .section__t { margin-bottom: 18px; }

  .x { width: 38px; height: 38px; }
  .qte button { width: 36px; height: 36px; }
  /* Trois colonnes dans 390 px : sans min-width:0 la colonne centrale
     refuse de rétrécir et la colonne des prix sort de l'écran. */
  .tiroir__corps { padding: 4px 16px 12px; }
  .pl { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; }
  .pl > div:nth-child(2) { min-width: 0; }
  .pl__img { width: 48px; height: 48px; }
  .pl__nom { font-size: 13px; }
  .tiroir__bas { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }

  .pied { padding: 36px 0 22px; }
  .pied__legal { font-size: 11.5px; }
}

/* La barre d'achat collante masquerait le bas de page : on rend la hauteur. */
@media (max-width: 899px) {
  body.avec-barre { padding-bottom: 78px; }
}

@media (max-width: 420px) {
  .grille { grid-template-columns: repeat(2, 1fr); }
  .lots { grid-template-columns: repeat(3, 1fr); }
  .args { gap: 10px; }
  .arg { padding: 14px; }
}

/* =========================================================================
   MENU MOBILE

   Le rail de catégories horizontal se coupait au milieu d'un mot et rien
   n'indiquait qu'il défilait. Sur téléphone il cède la place à un panneau.
   ========================================================================= */
.burger {
  display: none; width: 42px; height: 42px; border-radius: 12px;
  border: 1.5px solid var(--trait); background: #fff; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  flex: none; padding: 0;
}
.burger span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--encre); transition: transform .18s ease, opacity .18s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.only-mob-flex { display: none; }

.menu {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(400px, 92%);
  background: #fff; z-index: 100; transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.menu.ouvert { transform: none; }
.menu__haut {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--trait);
}
.menu__corps { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }
.menu__bas {
  border-top: 1px solid var(--trait); padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--fond-2);
}
.menu__t {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris-clair); margin: 20px 0 10px;
}
.menu__t:first-child { margin-top: 0; }

.menu__rayons { display: grid; gap: 8px; }
.menu__rayon {
  display: block; border: 1.5px solid var(--trait); border-radius: var(--r-s);
  padding: 11px 14px; position: relative; overflow: hidden; background: #fff;
}
.menu__rayon::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ton);
}
.menu__rayon b { display: block; font-size: 15.5px; font-weight: 750; color: var(--encre); }
.menu__rayon span { display: block; font-size: 12.5px; color: var(--gris); margin-top: 1px; }
.menu__rayon:hover, .menu__rayon:active { border-color: var(--ton); color: inherit; }

.menu__fams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu__fam {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650;
  border: 1.5px solid var(--trait); border-radius: 999px; padding: 9px 13px;
  min-height: 42px; color: var(--encre-2);
}
.menu__fam i { width: 10px; height: 10px; border-radius: 999px; background: var(--fam); flex: none; }

.menu__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu__liste a {
  display: block; padding: 11px 2px; font-size: 15px; color: var(--encre-2);
  border-bottom: 1px solid var(--fond-2); min-height: 44px;
}
.menu__liste a:active { color: var(--accent); }

@media (max-width: 899px) {
  .only-mob-flex { display: flex; }
  .nav { display: none; }
  .burger { display: flex; }
  .entete__haut { padding-bottom: 11px; }
}