/* =========================================================
   iClope — piste « Clair » — base.css
   Reset court + composants partagés. Mobile d'abord (390 px),
   une seule bascule majeure à 900 px.
   ========================================================= */

/* ---------- 1. Reset court ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { max-width: 100%; display: block; }
img { height: auto; }
/* Une icône inline vaut un caractère : elle prend la taille du texte et reste dans la ligne.
   Les composants (bouton, picto, badge…) redéfinissent ensuite leur propre taille. */
svg { max-width: 100%; width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.18em; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; width: 100%; }
a { color: var(--canard-fonce); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ardoise); }

body {
  font-family: var(--police);
  font-size: var(--t-m);
  line-height: var(--inter);
  color: var(--texte);
  background: var(--blanc);
  overflow-wrap: anywhere;   /* aucune référence produit ne déborde à 390 px */
}

h1, h2, h3, h4 { line-height: var(--inter-titre); font-weight: 700; }
h1 { font-size: var(--t-2xl); letter-spacing: -.01em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
@media (min-width: 900px) { h1 { font-size: var(--t-3xl); } }

p + p { margin-top: var(--e4); }
strong, b { font-weight: 700; }

/* Focus : visible partout, jamais retiré. */
:focus-visible {
  outline: 3px solid var(--canard-fonce);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
.sur-sombre :focus-visible, .cartouche-nicotine :focus-visible, .pied :focus-visible {
  outline-color: var(--menthe);
}

/* Mouvement : deux animations dans tout le site, et zéro si l'on n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 2. Gabarit ---------------------------------- */
.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--e4); }
@media (min-width: 900px) { .conteneur { padding-inline: var(--e5); } }
.lecture { max-width: var(--lecture); }
.pile > * + * { margin-top: var(--e4); }
.pile-l > * + * { margin-top: var(--e6); }
main { padding-bottom: var(--e7); }
.section { margin-top: var(--e7); }
.section:first-child { margin-top: var(--e5); }
.filet { border: 0; border-top: 1px solid var(--filet); margin: var(--e6) 0; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lien-evitement {
  position: absolute; left: var(--e4); top: -100px; z-index: 100;
  background: var(--ardoise); color: var(--blanc); padding: var(--e3) var(--e4);
  border-radius: var(--r-s); text-decoration: none;
}
.lien-evitement:focus { top: var(--e2); color: var(--blanc); }

/* ---------- 3. Pictogrammes ronds bicolores ------------- */
/* Un picto = un disque menthe + un trait canard. Jamais de contour fin seul. */
.picto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  background: var(--menthe); color: var(--canard-fonce);
  border-radius: var(--r-rond);
}
.picto svg { width: 22px; height: 22px; }
.picto--s { width: 28px; height: 28px; flex-basis: 28px; }
.picto--s svg { width: 16px; height: 16px; }
.picto--l { width: 56px; height: 56px; flex-basis: 56px; }
.picto--l svg { width: 30px; height: 30px; }
.picto--alerte { background: #FBDCE2; color: var(--framboise-txt); }
.picto--sombre { background: var(--canard-fonce); color: var(--blanc); }

/* ---------- 4. Boutons ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--cible); padding: var(--e3) var(--e5);
  border: 2px solid transparent; border-radius: var(--r-m);
  font-size: var(--t-m); font-weight: 700; line-height: 1.25;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.btn--achat { background: var(--orange); color: var(--ardoise); border-color: var(--orange); }
.btn--achat:hover { background: var(--orange-fonce); border-color: var(--orange-fonce); color: var(--ardoise); }
.btn--principal { background: var(--canard-fonce); color: var(--blanc); border-color: var(--canard-fonce); }
.btn--principal:hover { background: var(--ardoise); border-color: var(--ardoise); color: var(--blanc); }
.btn--contour { background: var(--blanc); color: var(--canard-fonce); border-color: var(--canard); }
.btn--contour:hover { background: var(--canard-clair); color: var(--canard-fonce); }
.btn--sobre { background: var(--perle); color: var(--ardoise); border-color: var(--perle); }
.btn--sobre:hover { background: var(--perle-fonce); border-color: var(--perle-fonce); color: var(--ardoise); }
.btn--bloc { display: flex; width: 100%; }
.btn--court { min-height: var(--cible-s); padding: var(--e2) var(--e4); font-size: var(--t-s); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--perle); border-color: var(--perle); color: var(--texte-2); cursor: not-allowed;
}
.btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.btn-lien {
  background: none; border: 0; padding: var(--e2) 0; cursor: pointer;
  color: var(--canard-fonce); font-weight: 700; text-decoration: underline;
  min-height: var(--cible-s);
}
.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; min-width: var(--cible-s); min-height: var(--cible-s);
  padding: var(--e2); border: 0; background: none; color: var(--ardoise);
  border-radius: var(--r-s); cursor: pointer; text-decoration: none;
}
.btn-icone svg { width: 26px; height: 26px; }
.btn-icone:hover { background: var(--perle-fonce); color: var(--ardoise); }
.btn-icone__mot { display: none; }
@media (min-width: 900px) {
  .btn-icone { flex-direction: column; gap: 2px; min-width: 64px; }
  .btn-icone__mot { display: block; font-size: var(--t-xs); font-weight: 700; }
}
.compteur {
  position: absolute; top: 2px; right: 2px;
  min-width: 22px; height: 22px; padding: 0 5px;
  background: var(--canard-fonce); color: var(--blanc);
  border-radius: var(--r-rond); font-size: var(--t-xs); font-weight: 700;
  line-height: 22px; text-align: center;
}
@media (min-width: 900px) { .compteur { right: 8px; } }

/* ---------- 5. En-tête ---------------------------------- */
.entete { background: var(--perle); border-bottom: 1px solid var(--filet); }
.entete__service { display: none; }
@media (min-width: 900px) {
  .entete__service {
    display: block; background: var(--ardoise); color: var(--blanc); font-size: var(--t-xs);
  }
  .entete__service ul { display: flex; gap: var(--e5); align-items: center; min-height: 40px; flex-wrap: wrap; }
  .entete__service li { display: flex; align-items: center; gap: var(--e2); }
  .entete__service a { display: inline-flex; align-items: center; min-height: var(--cible-s); }
  .entete__service a { color: var(--menthe); }
  .entete__service svg { width: 16px; height: 16px; }
}
.entete__barre {
  display: flex; align-items: center; gap: var(--e2);
  padding-block: var(--e3);
}
.marque { display: inline-flex; align-items: baseline; gap: var(--e2); min-height: var(--cible-s);
          padding-block: var(--e2); text-decoration: none; color: var(--ardoise); }
.marque:hover { color: var(--ardoise); }
.marque__mot { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; }
.marque__point { color: var(--canard); }
.marque__depuis { font-size: var(--t-xs); color: var(--texte-2); white-space: nowrap; }
@media (max-width: 359px) { .marque__depuis { display: none; } }
.entete__actions { display: flex; align-items: center; gap: 0; margin-left: auto; }

.recherche { position: relative; padding-bottom: var(--e3); }
.recherche__champ {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--blanc); border: 2px solid var(--filet-fort); border-radius: var(--r-m);
  padding-inline: var(--e3); min-height: var(--cible);
}
.recherche__champ:focus-within { border-color: var(--canard); }
.recherche__champ svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--canard-fonce); }
.recherche__champ input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; min-height: 52px;
  font-size: var(--t-m);
}
.recherche__champ input:focus { outline: none; }
.recherche__envoi {
  border: 0; background: var(--canard-fonce); color: var(--blanc); font-weight: 700;
  border-radius: var(--r-s); min-height: var(--cible-s); padding-inline: var(--e4); cursor: pointer;
}

/* Le marqueur de la piste : « Vos habituels », dans l'en-tête de chaque page. */
.habituels-lien {
  display: flex; align-items: center; gap: var(--e3);
  min-height: var(--cible); padding: var(--e2) var(--e3);
  background: var(--blanc); border: 2px solid var(--canard); border-radius: var(--r-m);
  text-decoration: none; color: var(--ardoise); margin-bottom: var(--e3);
}
.habituels-lien:hover { background: var(--canard-clair); color: var(--ardoise); }
.habituels-lien__txt { display: flex; flex-direction: column; min-width: 0; }
.habituels-lien__txt b { font-size: var(--t-m); }
.habituels-lien__txt small { font-size: var(--t-xs); color: var(--texte-2); }
.habituels-lien__fleche { margin-left: auto; color: var(--canard-fonce); }
.habituels-lien__fleche svg { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .habituels-lien { margin-bottom: 0; flex: 0 0 auto; }
  .entete__barre { gap: var(--e5); padding-block: var(--e4); }
  .entete__barre .recherche { flex: 1 1 auto; padding-bottom: 0; }
}

/* Navigation desktop + méga-menu */
.nav-principale { display: none; }
@media (min-width: 900px) {
  .nav-principale { display: block; background: var(--blanc); border-top: 1px solid var(--filet); }
  .nav-principale > .conteneur > ul { display: flex; flex-wrap: wrap; }
  .nav-principale li { position: relative; }
  .nav-principale > .conteneur > ul > li > a {
    display: flex; align-items: center; min-height: 52px; padding-inline: var(--e4);
    color: var(--ardoise); text-decoration: none; font-weight: 700; font-size: var(--t-s);
    border-bottom: 3px solid transparent;
  }
  .nav-principale > .conteneur > ul > li > a:hover,
  .nav-principale li:focus-within > a { border-bottom-color: var(--canard); background: var(--canard-clair); }
  .nav-principale li[aria-current="page"] > a, .nav-principale a[aria-current="page"] { border-bottom-color: var(--canard); }
  .megamenu {
    position: absolute; left: 0; top: 100%; z-index: 40; display: none;
    width: min(760px, 90vw); background: var(--blanc);
    border: 1px solid var(--filet); border-top: 3px solid var(--canard);
    border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: var(--ombre-carte);
    padding: var(--e5); gap: var(--e5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .nav-principale li:hover > .megamenu, .nav-principale li:focus-within > .megamenu { display: grid; }
  .megamenu h3 { font-size: var(--t-s); color: var(--canard-fonce); margin-bottom: var(--e2); }
  .megamenu ul { display: grid; gap: var(--e1); }
  .megamenu a { display: block; padding: var(--e2) 0; color: var(--ardoise); text-decoration: none; }
  .megamenu a:hover { text-decoration: underline; }
  .megamenu .megamenu__conseil {
    grid-column: 3; background: var(--menthe-pale); border-radius: var(--r-m); padding: var(--e4);
  }
}

/* Tiroir mobile (menu et filtres) */
.voile {
  position: fixed; inset: 0; background: rgba(30,42,42,.55); z-index: 60;
  opacity: 0; visibility: hidden; transition: opacity var(--duree-l) var(--courbe), visibility var(--duree-l);
}
.voile[data-ouvert="oui"] { opacity: 1; visibility: visible; }
.tiroir {
  position: fixed; z-index: 61; top: 0; bottom: 0; left: 0; width: min(340px, 88vw);
  background: var(--blanc); box-shadow: var(--ombre-carte);
  transform: translateX(-100%); transition: transform var(--duree-l) var(--courbe);
  display: flex; flex-direction: column;
}
.tiroir--droite { left: auto; right: 0; transform: translateX(100%); width: min(380px, 92vw); }
.tiroir[data-ouvert="oui"] { transform: translateX(0); }
.tiroir__tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e4); border-bottom: 1px solid var(--filet);
}
.tiroir__corps { overflow-y: auto; padding: var(--e4); flex: 1 1 auto; }
.tiroir__pied { padding: var(--e4); border-top: 1px solid var(--filet); display: flex; gap: var(--e3); }
.tiroir__corps a { display: block; padding: var(--e3) 0; color: var(--ardoise); text-decoration: none; font-weight: 700; }
.tiroir__corps a:hover { color: var(--canard-fonce); }
.tiroir__corps li + li { border-top: 1px solid var(--filet); }
@media (min-width: 900px) { .voile, .tiroir { display: none; } }

/* ---------- 6. Fil d'ariane et titres de page ----------- */
.ariane { font-size: var(--t-s); color: var(--texte-2); padding-top: var(--e4); }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.ariane li::after { content: "·"; margin-left: var(--e2); color: var(--filet-fort); }
.ariane li:last-child::after { content: none; }
.tete-page { margin-top: var(--e4); }
.tete-page .chapeau { font-size: var(--t-l); color: var(--texte-2); margin-top: var(--e3); }
.tete-page .meta { font-size: var(--t-s); color: var(--texte-2); margin-top: var(--e2); }

/* Titre de bloc : le seul endroit où le canard fait du gras. */
.bloc__tete {
  display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4);
  flex-wrap: wrap;
}
.bloc__tete h2, .bloc__tete h3 { color: var(--canard-fonce); }
.bloc__tete .lien-tout { display: inline-flex; align-items: center; min-height: var(--cible-s);
                         margin-left: auto; font-size: var(--t-s); font-weight: 700; }
.sous-titre { color: var(--texte-2); font-size: var(--t-s); margin-top: calc(var(--e1) * -1); }

/* ---------- 7. Carte produit ---------------------------- */
/* Une seule carte : horizontale (liste) sous 700 px, verticale au-dessus. */
.grille-produits { display: grid; gap: var(--e3); }
@media (min-width: 700px) {
  .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
}
@media (min-width: 1000px) {
  .grille-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.carte-produit {
  display: grid; grid-template-columns: var(--img-liste) minmax(0, 1fr);
  gap: var(--e3); align-items: start;
  padding: var(--e3); background: var(--blanc);
  border: 1px solid var(--filet); border-radius: var(--r-m);
}
.carte-produit__media {
  grid-row: span 2; display: block; background: var(--perle);
  border-radius: var(--r-s); overflow: hidden; aspect-ratio: 1 / 1;
}
.carte-produit__media img { width: 100%; height: 100%; object-fit: contain; }
.carte-produit__corps { min-width: 0; }
.carte-produit__marque { font-size: var(--t-xs); color: var(--texte-2); text-transform: none; }
.carte-produit__nom { font-size: var(--t-m); font-weight: 700; margin-top: 2px; }
.carte-produit__nom a { display: flex; align-items: center; min-height: var(--cible-s);
                        color: var(--ardoise); text-decoration: none; }
.carte-produit__nom a:hover { text-decoration: underline; }
.carte-produit__decl { font-size: var(--t-s); color: var(--texte-2); margin-top: var(--e1); }
.carte-produit__bas {
  grid-column: 2; display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; margin-top: var(--e3);
}
.carte-produit__bas .btn { flex: 1 1 130px; }
@media (min-width: 700px) {
  .carte-produit { grid-template-columns: minmax(0, 1fr); }
  .carte-produit__media { grid-row: auto; aspect-ratio: 4 / 3; }
  .carte-produit__bas { grid-column: 1; }
}
/* Variante imposée : reste en liste quel que soit l'écran (recherche, habituels, panier). */
.grille-produits--liste { grid-template-columns: minmax(0, 1fr) !important; }
.grille-produits--liste .carte-produit { grid-template-columns: var(--img-liste) minmax(0, 1fr); }
.grille-produits--liste .carte-produit__media { grid-row: span 2; aspect-ratio: 1 / 1; }
.grille-produits--liste .carte-produit__bas { grid-column: 2; }
@media (min-width: 900px) {
  .grille-produits--liste .carte-produit { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
  .grille-produits--liste .carte-produit__bas { margin-top: var(--e2); }
}

/* Prix : toujours plus gros et plus gras que le texte voisin. */
.prix { font-size: var(--t-l); font-weight: 700; white-space: nowrap; }
.prix--fiche { font-size: var(--t-2xl); }
.prix__unite { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--texte-2); }
.prix--barre { font-size: var(--t-s); font-weight: 400; color: var(--texte-2); text-decoration: line-through; }

/* ---------- 8. Badges factuels -------------------------- */
.badges { display: flex; flex-wrap: wrap; gap: var(--e2); }
.badge {
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: 3px var(--e2); border-radius: var(--r-s);
  font-size: var(--t-xs); font-weight: 700;
  background: var(--perle); color: var(--texte-2); border: 1px solid var(--filet);
}
.badge svg { width: 14px; height: 14px; }
.badge--stock { background: var(--menthe); color: #0F4C49; border-color: #A9DCD7; }
.badge--nouveau { background: var(--canard-clair); color: var(--canard-fonce); border-color: #A9DCD7; }
.badge--dluo { background: #FDEEDC; color: #8A4B08; border-color: #F3D3AC; }
.badge--rupture { background: #FBDCE2; color: var(--framboise-txt); border-color: #F3B9C4; }
.badge--reassort { background: var(--perle); color: var(--texte-2); }

/* ---------- 9. Champs de formulaire --------------------- */
/* Libellé AU-DESSUS, toujours. Jamais de placeholder seul. */
.champ { display: block; margin-top: var(--e4); }
.champ > .lab { display: block; font-size: var(--t-s); font-weight: 700; margin-bottom: var(--e2); }
.champ .aide { display: block; font-size: var(--t-xs); color: var(--texte-2); margin-bottom: var(--e2); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: var(--cible); padding: var(--e3) var(--e4);
  background: var(--blanc); border: 2px solid var(--filet-fort); border-radius: var(--r-m);
  font-size: var(--t-m);
}
.champ textarea { min-height: 120px; }
.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146B67' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e4) center; background-size: 22px;
  padding-right: var(--e8);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--canard); }
.champ--erreur input, .champ--erreur select { border-color: var(--framboise); }
.champ__erreur { display: flex; gap: var(--e2); align-items: center; margin-top: var(--e2); font-size: var(--t-s); color: var(--framboise-txt); font-weight: 700; }
.champ__erreur svg { width: 18px; height: 18px; flex: 0 0 18px; }
.duo { display: grid; gap: var(--e3); }
@media (min-width: 700px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--e4); } }

.case {
  display: flex; gap: var(--e3); align-items: flex-start;
  min-height: var(--cible); padding: var(--e3) 0; cursor: pointer;
}
.case input { width: 26px; height: 26px; flex: 0 0 26px; margin-top: 2px; accent-color: var(--canard-fonce); }
.case span { font-size: var(--t-s); }

/* ---------- 10. Sélecteur de déclinaison ---------------- */
.choix { margin-top: var(--e5); }
.choix__legende { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; font-weight: 700; margin-bottom: var(--e3); }
.choix__legende .val { color: var(--canard-fonce); }
.choix__options { display: flex; flex-wrap: wrap; gap: var(--e2); }
/* Les taux de nicotine s'alignent en colonnes régulières : on les compare d'un coup d'œil. */
.choix__options--grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.choix__opt { position: relative; flex: 1 1 auto; }
.choix__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix__opt span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--cible); min-width: 72px; padding: var(--e2) var(--e3);
  background: var(--blanc); border: 2px solid var(--filet-fort); border-radius: var(--r-m);
  font-weight: 700; cursor: pointer; text-align: center; line-height: 1.15;
}
.choix__opt small { font-size: var(--t-xs); font-weight: 400; color: var(--texte-2); }
.choix__opt input:checked + span { border-color: var(--canard); background: var(--menthe); }
.choix__opt input:focus-visible + span { outline: 3px solid var(--canard-fonce); outline-offset: 2px; }
.choix__opt input:disabled + span { background: var(--perle); color: var(--texte-2); border-color: var(--filet); text-decoration: line-through; cursor: not-allowed; }
.choix__opt--large span { min-width: 120px; flex-direction: row; gap: var(--e2); }
.choix__aide {
  display: flex; gap: var(--e3); align-items: flex-start;
  margin-top: var(--e3); padding: var(--e3) var(--e4);
  background: var(--menthe-pale); border-radius: var(--r-m); font-size: var(--t-s);
}
.choix__aide .picto { flex: 0 0 28px; width: 28px; height: 28px; background: var(--menthe); }
.choix__aide .picto svg { width: 16px; height: 16px; }

/* ---------- 11. Quantité et lots ------------------------ */
.quantite { display: inline-flex; align-items: center; border: 2px solid var(--filet-fort); border-radius: var(--r-m); background: var(--blanc); }
.quantite button {
  width: var(--cible); height: var(--cible); border: 0; background: none;
  font-size: var(--t-l); font-weight: 700; color: var(--canard-fonce); cursor: pointer;
}
.quantite button:hover { background: var(--canard-clair); }
.quantite input {
  width: 56px; height: var(--cible); border: 0; text-align: center;
  font-size: var(--t-m); font-weight: 700; -moz-appearance: textfield;
}
.quantite input::-webkit-outer-spin-button, .quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lots { display: grid; gap: var(--e2); margin-top: var(--e3); }
.lot {
  display: flex; align-items: center; gap: var(--e3);
  min-height: var(--cible); padding: var(--e2) var(--e4);
  border: 2px solid var(--filet); border-radius: var(--r-m); background: var(--blanc);
  width: 100%; cursor: pointer; text-align: left; font-size: var(--t-s);
}
.lot:hover { border-color: var(--canard); background: var(--canard-clair); }
.lot b { font-size: var(--t-m); }
.lot .prix { margin-left: auto; font-size: var(--t-m); }
.lot__eco { font-size: var(--t-xs); color: var(--texte-2); }

/* ---------- 12. Encadré conseil et blocs d'aide --------- */
.conseil {
  display: flex; gap: var(--e4); align-items: flex-start;
  padding: var(--e4); background: var(--menthe-pale);
  border-radius: var(--r-l); border: 1px solid #BFE4DF;
}
.conseil h3 { font-size: var(--t-m); margin-bottom: var(--e2); color: var(--canard-fonce); }
.conseil p { font-size: var(--t-s); }
.conseil--sobre { background: var(--perle); border-color: var(--filet); }
.compat { border: 1px solid var(--filet); border-radius: var(--r-m); padding: var(--e4); }
.compat h3 { font-size: var(--t-m); margin-bottom: var(--e3); }
.compat li { display: flex; gap: var(--e3); align-items: center; padding: var(--e2) 0; font-size: var(--t-s); }
.compat li + li { border-top: 1px solid var(--filet); }

/* Réassurance : trois pictos, une ligne. */
.reassurance { display: grid; gap: var(--e3); }
@media (min-width: 700px) { .reassurance { grid-template-columns: repeat(3, 1fr); gap: var(--e4); } }
.reassurance li { display: flex; gap: var(--e3); align-items: center; font-size: var(--t-s); }
.reassurance b { display: block; font-size: var(--t-m); }

/* ---------- 13. Avis ------------------------------------ */
.note { display: inline-flex; align-items: center; gap: var(--e2); }
.note__etoiles { display: inline-flex; gap: 2px; color: var(--canard); }
/* Étoile pleine = note acquise ; étoile en contour = la fraction restante. */
.note__etoiles .pleine { fill: currentColor; }
.note__etoiles svg { width: 18px; height: 18px; }
.note__val { font-weight: 700; }
.note__nb { font-size: var(--t-s); color: var(--texte-2); }
.avis { border-top: 1px solid var(--filet); padding: var(--e4) 0; }
.avis__tete { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; margin-bottom: var(--e2); }
.avis__tete b { font-size: var(--t-s); }
.avis__date { font-size: var(--t-xs); color: var(--texte-2); }
.avis__verifie { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-xs); color: var(--canard-fonce); font-weight: 700; }
.avis__verifie svg { width: 16px; height: 16px; }
.avis p { font-size: var(--t-s); }

/* ---------- 14. Filtres, puces, tri --------------------- */
.barre-outils { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; margin-top: var(--e4); }
.barre-outils .btn { flex: 1 1 auto; }
.barre-outils__nb { font-size: var(--t-s); color: var(--texte-2); width: 100%; }
@media (min-width: 900px) { .barre-outils__nb { width: auto; margin-right: auto; } }
.puces { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.puce {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: var(--cible-s); padding: var(--e2) var(--e3);
  background: var(--menthe); color: #0F4C49; border: 1px solid #A9DCD7;
  border-radius: var(--r-rond); font-size: var(--t-s); font-weight: 700;
  cursor: pointer;
}
.puce svg { width: 16px; height: 16px; }
.puce--effacer { background: var(--blanc); border-color: var(--filet-fort); color: var(--texte-2); }
.groupe-filtre { border-top: 1px solid var(--filet); padding: var(--e4) 0; }
.groupe-filtre > h3 { font-size: var(--t-m); margin-bottom: var(--e2); }
.colonne-filtres { display: none; }
@media (min-width: 900px) {
  .colonne-filtres { display: block; }
  .avec-colonne { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--e7); align-items: start; }
  .bouton-filtres { display: none; }
}

/* ---------- 15. Onglets --------------------------------- */
.onglets { display: flex; gap: var(--e2); border-bottom: 2px solid var(--filet); overflow-x: auto; }
.onglets button {
  min-height: var(--cible); padding: 0 var(--e4); border: 0; background: none; cursor: pointer;
  font-weight: 700; color: var(--texte-2); border-bottom: 3px solid transparent; white-space: nowrap;
}
.onglets button[aria-selected="true"] { color: var(--canard-fonce); border-bottom-color: var(--canard); }
.panneau[hidden] { display: none; }
.panneau { padding-top: var(--e4); }

/* ---------- 16. Guide : sommaire, tableau, questions ---- */
.sommaire { background: var(--perle); border-radius: var(--r-l); padding: var(--e4) var(--e5); }
.sommaire h2 { font-size: var(--t-m); margin-bottom: var(--e3); }
.sommaire ol { counter-reset: s; }
.sommaire li { counter-increment: s; border-top: 1px solid var(--filet); }
.sommaire li:first-child { border-top: 0; }
.sommaire a { display: flex; gap: var(--e3); align-items: baseline; padding: var(--e3) 0; color: var(--ardoise); text-decoration: none; font-weight: 700; }
.sommaire a::before { content: counter(s); color: var(--canard-fonce); font-variant-numeric: tabular-nums; }
.sommaire a:hover { color: var(--canard-fonce); text-decoration: underline; }
.texte h2 { margin-top: var(--e7); }
.texte h3 { margin-top: var(--e6); }
.texte p, .texte ul, .texte ol { margin-top: var(--e4); }
.texte ul li { position: relative; padding-left: var(--e5); margin-top: var(--e2); }
.texte ul li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: var(--r-rond); background: var(--canard);
}
.texte ol { counter-reset: n; }
.texte ol li { position: relative; padding-left: var(--e6); margin-top: var(--e3); counter-increment: n; }
.texte ol li::before {
  content: counter(n); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: var(--r-rond);
  background: var(--menthe); color: var(--canard-fonce);
  font-size: var(--t-xs); font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.tableau-scroll { overflow-x: auto; margin-top: var(--e4); border: 1px solid var(--filet); border-radius: var(--r-m); }
.tableau { min-width: 520px; font-size: var(--t-s); }
.tableau th, .tableau td { padding: var(--e3) var(--e4); text-align: left; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau thead th { background: var(--perle); font-size: var(--t-xs); }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau td b { white-space: nowrap; }
.question { border-top: 1px solid var(--filet); }
.question summary {
  display: flex; gap: var(--e3); align-items: center; justify-content: space-between;
  min-height: var(--cible); padding: var(--e3) 0; font-weight: 700; cursor: pointer; list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "+"; color: var(--canard-fonce); font-size: var(--t-l); flex: 0 0 auto;
}
.question[open] summary::after { content: "–"; }
.question p { padding-bottom: var(--e4); font-size: var(--t-s); }
.signature { display: flex; gap: var(--e3); align-items: center; font-size: var(--t-s); color: var(--texte-2); }

/* ---------- 17. Tunnel ---------------------------------- */
.progression { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); font-size: var(--t-s); font-weight: 700; color: var(--texte-2); }
.progression li { display: flex; align-items: center; gap: var(--e3); }
.progression li + li::before { content: "·"; color: var(--filet-fort); }
.progression [aria-current="step"] { color: var(--canard-fonce); }
.progression .fait { color: var(--ardoise); }
.etape { border: 1px solid var(--filet); border-radius: var(--r-l); padding: var(--e5) var(--e4); margin-top: var(--e4); }
.etape[hidden] { display: none; }
.etape__num { display: flex; gap: var(--e3); align-items: center; margin-bottom: var(--e4); }
.etape__num b {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: var(--canard-fonce); color: var(--blanc); border-radius: var(--r-rond);
}
.option-radio {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e4); border: 2px solid var(--filet); border-radius: var(--r-m);
  cursor: pointer; margin-top: var(--e3); background: var(--blanc);
}
.option-radio input { width: 26px; height: 26px; flex: 0 0 26px; margin-top: 2px; accent-color: var(--canard-fonce); }
.option-radio:has(input:checked) { border-color: var(--canard); background: var(--menthe-pale); }
.option-radio b { display: block; }
.option-radio small { display: block; font-size: var(--t-s); color: var(--texte-2); margin-top: 2px; }
.option-radio .prix { margin-left: auto; font-size: var(--t-m); }

/* ---------- 18. Récapitulatif et lignes de panier ------- */
.recap { background: var(--perle); border-radius: var(--r-l); padding: var(--e4) var(--e5); }
.recap dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e3) var(--e4); font-size: var(--t-s); }
.recap dt { color: var(--texte-2); }
.recap dd { text-align: right; font-weight: 700; }
.recap .total { font-size: var(--t-l); }
.recap hr { border: 0; border-top: 1px solid var(--filet-fort); grid-column: 1 / -1; margin: 0; }

/* ---------- 19. Barre d'achat fixe (mobile) ------------- */
.barre-achat {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  background: var(--blanc); border-top: 1px solid var(--filet); box-shadow: var(--ombre-flottant);
}
.barre-achat .prix { font-size: var(--t-l); }
.barre-achat .btn { flex: 1 1 auto; }
.barre-achat__decl { display: block; font-size: var(--t-xs); color: var(--texte-2); font-weight: 400; }
body.a-barre-achat { padding-bottom: 96px; }
@media (min-width: 900px) {
  .barre-achat { display: none; }
  body.a-barre-achat { padding-bottom: 0; }
}

/* ---------- 20. Toast, age gate, cookies ---------------- */
.toast {
  position: fixed; left: var(--e4); right: var(--e4); bottom: var(--e4); z-index: 70;
  display: flex; align-items: center; gap: var(--e3);
  background: var(--ardoise); color: var(--blanc);
  border-radius: var(--r-m); padding: var(--e3) var(--e4); box-shadow: var(--ombre-toast);
  transform: translateY(calc(100% + 140px)); transition: transform var(--duree-l) var(--courbe);
}
.toast[data-ouvert="oui"] { transform: translateY(0); }
body.a-barre-achat .toast { bottom: 96px; }
.toast p { flex: 1 1 110px; min-width: 0; }
.toast a { color: var(--menthe); font-weight: 700; margin-left: auto; white-space: nowrap; }
@media (max-width: 599px) { .toast .picto { display: none; } }
.toast .picto { background: var(--menthe); }
@media (min-width: 900px) { .toast { left: auto; width: 420px; } }

.agegate {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: var(--e4); background: rgba(30,42,42,.72);
}
.agegate[hidden] { display: none; }
.agegate__carte {
  width: 100%; max-width: 420px; background: var(--blanc);
  border-radius: var(--r-l); padding: var(--e6) var(--e5); box-shadow: var(--ombre-carte);
}
.agegate__carte h2 { font-size: var(--t-xl); margin: var(--e4) 0 var(--e3); }
.agegate__carte p { font-size: var(--t-s); color: var(--texte-2); }
.agegate__boutons { display: grid; gap: var(--e3); margin-top: var(--e5); }

.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--blanc); border-top: 2px solid var(--canard);
  box-shadow: var(--ombre-flottant); padding: var(--e4);
}
.cookies[hidden] { display: none; }
.cookies__corps { display: grid; gap: var(--e3); }
.cookies p { font-size: var(--t-s); }
.cookies__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
@media (min-width: 900px) {
  .cookies__corps { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--e5); }
  .cookies__boutons { grid-template-columns: auto auto; }
}

/* ---------- 21. États ----------------------------------- */
.etat-vide {
  position: relative; text-align: center;
  padding: calc(96px + var(--e6)) var(--e4) var(--e7);
  background: var(--menthe-pale); border-radius: var(--r-l); overflow: hidden;
}
/* Bandeau décoratif : l'illustration ne passe JAMAIS sous du texte (le canard
   plein y descend à 3,5:1 avec l'ardoise). */
.etat-vide::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 96px;
  background: var(--menthe) url("gen/formes-calmes.png") center / cover no-repeat;
}
.etat-vide--gauche { text-align: left; }
.etat-vide--sans-fond { padding-top: var(--e6); }
.etat-vide--sans-fond::before { display: none; }
.etat-vide h2 { margin: var(--e4) 0 var(--e3); }
.etat-vide p { color: var(--texte-2); max-width: 46ch; margin-inline: auto; }
.etat-vide .picto { margin-inline: auto; }
.etat-vide__actions { display: grid; gap: var(--e3); margin-top: var(--e5); max-width: 380px; margin-inline: auto; }
.msg {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e4); border-radius: var(--r-m); font-size: var(--t-s);
  border: 1px solid var(--filet); background: var(--perle);
}
.msg--erreur { background: #FDECEF; border-color: #F3B9C4; }
.msg--info { background: var(--menthe-pale); border-color: #BFE4DF; }
.squelette > * {
  background: linear-gradient(90deg, var(--perle) 0%, var(--perle-fonce) 50%, var(--perle) 100%);
  background-size: 200% 100%; border-radius: var(--r-s);
  animation: glisse 1.4s linear infinite;
}
@keyframes glisse { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.squelette .l1 { height: 14px; width: 40%; }
.squelette .l2 { height: 22px; width: 80%; margin-top: var(--e3); }
.squelette .l3 { height: 22px; width: 30%; margin-top: var(--e3); }
.squelette .im { height: 72px; width: 72px; }

/* ---------- 22. Pied de page et cartouche nicotine ------ */
.pied { background: var(--ardoise); color: var(--blanc); margin-top: var(--e8); }
.pied a { color: var(--blanc); text-decoration: none; }
.pied a:hover { color: var(--menthe); text-decoration: underline; }
.pied__haut { padding-block: var(--e6); border-bottom: 1px solid rgba(255,255,255,.16); }
.pied__cols { display: grid; gap: var(--e6); padding-block: var(--e6); }
@media (min-width: 700px) { .pied__cols { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) { .pied__cols { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--e5); } }
.pied h2 { font-size: var(--t-m); color: var(--menthe); margin-bottom: var(--e3); }
.pied li { font-size: var(--t-s); }
.pied li a { display: inline-flex; align-items: center; min-height: var(--cible-s); }
.pied .reassurance li { color: var(--blanc); }
.pied .reassurance .picto { background: rgba(207,237,233,.16); color: var(--menthe); }
.pied__lettre input {
  width: 100%; min-height: var(--cible); border-radius: var(--r-m); border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06); color: var(--blanc); padding: var(--e3) var(--e4); font-size: var(--t-s);
}
.pied__lettre input::placeholder { color: rgba(255,255,255,.6); }
.pied__legal { padding-block: var(--e5); border-top: 1px solid rgba(255,255,255,.16); font-size: var(--t-xs); color: rgba(255,255,255,.75); }
.pied__legal ul { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin-top: var(--e3); }

/* Le cartouche : mention obligatoire, tenue comme un élément de design. */
.cartouche-nicotine { background: var(--ardoise-nuit); border-top: 3px solid var(--canard); color: var(--blanc); }
.cartouche-nicotine .conteneur {
  display: flex; gap: var(--e4); align-items: center;
  padding-block: var(--e4); font-size: var(--t-xs); line-height: 1.45;
}
.cartouche-nicotine .picto { background: rgba(207,237,233,.14); color: var(--menthe); }
.cartouche-nicotine b { display: block; font-size: var(--t-s); }
.cartouche-nicotine span { color: rgba(255,255,255,.8); }
.cartouche-nicotine a { color: var(--menthe); }
.cartouche-nicotine a:hover { color: var(--blanc); }

/* ---------- 23. Divers utiles --------------------------- */
.entre-deux { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.galerie { display: grid; gap: var(--e3); }
.galerie__principale { background: var(--perle); border-radius: var(--r-m); aspect-ratio: 1 / 1; overflow: hidden; }
.galerie__principale img { width: 100%; height: 100%; object-fit: contain; }
.galerie__vignettes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.galerie__vignettes button {
  width: 72px; height: 72px; padding: var(--e1); background: var(--perle);
  border: 2px solid transparent; border-radius: var(--r-s); cursor: pointer;
}
.galerie__vignettes button[aria-current="true"] { border-color: var(--canard); }
.galerie__vignettes img { width: 100%; height: 100%; object-fit: contain; }
.deux-colonnes { display: grid; gap: var(--e6); }
@media (min-width: 900px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--e7); align-items: start; }
  .deux-colonnes--fiche { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  .colle { position: sticky; top: var(--e4); }
}
.liste-liens li { border-top: 1px solid var(--filet); }
.liste-liens a { display: flex; align-items: center; gap: var(--e3); min-height: var(--cible); padding: var(--e2) 0; color: var(--ardoise); text-decoration: none; font-weight: 700; }
.liste-liens a:hover { color: var(--canard-fonce); }
.liste-liens .fleche { margin-left: auto; color: var(--canard-fonce); }
.liste-liens .fleche svg { width: 22px; height: 22px; }

/* =========================================================
   24. « Vos habituels » — l'élément signature de la piste
   Une ligne = un consommable, sa dernière déclinaison, un bouton.
   ========================================================= */
.habituels { border: 2px solid var(--canard); border-radius: var(--r-l); overflow: hidden; background: var(--blanc); }
.habituels__tete {
  display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap;
  padding: var(--e4); background: var(--menthe);
}
.habituels__tete h2 { font-size: var(--t-l); color: var(--ardoise); }
.habituels__tete p { width: 100%; font-size: var(--t-s); color: #34534F; }
.habituels__ligne {
  display: grid; grid-template-columns: var(--img-liste) minmax(0, 1fr);
  gap: var(--e3); align-items: center; padding: var(--e3) var(--e4);
  border-top: 1px solid var(--filet);
}
.habituels__ligne:first-of-type { border-top: 0; }
.habituels__img { background: var(--perle); border-radius: var(--r-s); aspect-ratio: 1/1; overflow: hidden; }
.habituels__img img { width: 100%; height: 100%; object-fit: contain; }
.habituels__corps { min-width: 0; }
.habituels__nom { font-weight: 700; font-size: var(--t-m); }
.habituels__nom a { color: var(--ardoise); text-decoration: none; }
.habituels__nom a:hover { text-decoration: underline; }
.habituels__decl { font-size: var(--t-s); color: var(--texte-2); }
.habituels__decl b { color: var(--canard-fonce); }
.habituels__action { grid-column: 2; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.habituels__action .btn { flex: 1 1 150px; }
.habituels__pied {
  display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap;
  padding: var(--e4); background: var(--perle); border-top: 1px solid var(--filet);
}
.habituels__pied .btn { flex: 1 1 220px; }
.habituels__pied p { font-size: var(--t-s); color: var(--texte-2); }
@media (min-width: 700px) {
  .habituels__ligne { grid-template-columns: var(--img-liste) minmax(0, 1fr) auto; }
  .habituels__action { grid-column: 3; }
  .habituels__action .btn { flex: 0 0 auto; }
}
.habituels__vide {
  display: grid; gap: var(--e4); padding: var(--e5) var(--e4); align-items: center;
  background: var(--menthe-pale);
}
.habituels__vide img { width: 160px; max-width: 60%; justify-self: center; }
@media (min-width: 700px) {
  .habituels__vide { grid-template-columns: minmax(0,1fr) 200px; }
  .habituels__vide img { width: 100%; max-width: none; }
}

/* ---------- 25. Accueil : hero et entrées --------------- */
.hero {
  display: grid; gap: var(--e4); align-items: center;
  /* Le fond reprend EXACTEMENT celui de la photo : la jointure disparaît. */
  background: var(--menthe-photo); border-radius: var(--r-l); overflow: hidden;
}
.hero__txt { padding: var(--e5) var(--e4) 0; }
.hero h1 { font-size: var(--t-xl); max-width: 18ch; }
.hero p { max-width: 36ch; font-size: var(--t-s); }
/* Le flatlay porte ses objets à droite : on ne place jamais de texte par-dessus. */
.hero__img { width: 100%; height: 132px; object-fit: cover; object-position: 72% center; display: block; }
@media (min-width: 700px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 0; }
  .hero__txt { padding: var(--e6); }
  .hero h1 { font-size: var(--t-2xl); }
  .hero p { font-size: var(--t-m); }
  .hero__img { height: 100%; min-height: 260px; object-position: 60% center; }
}
.tuiles { display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); } }
@media (min-width: 1000px) { .tuiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tuile {
  display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start;
  min-height: 108px; padding: var(--e3); background: var(--perle);
  border: 1px solid var(--filet); border-radius: var(--r-m);
  color: var(--ardoise); text-decoration: none; font-weight: 700; font-size: var(--t-s);
}
.tuile:hover { background: var(--canard-clair); border-color: var(--canard); color: var(--ardoise); }
.tuile small { font-weight: 400; font-size: var(--t-xs); color: var(--texte-2); }

/* ---------- 26. Marque et silo -------------------------- */
.tete-marque {
  display: grid; gap: var(--e4); align-items: center;
  background: var(--perle); border-radius: var(--r-l); padding: var(--e5);
}
@media (min-width: 700px) { .tete-marque { grid-template-columns: 140px minmax(0,1fr); } }
.tete-marque__logo {
  display: flex; align-items: center; justify-content: center;
  background: var(--blanc); border-radius: var(--r-m); min-height: 110px; padding: var(--e4);
  font-size: var(--t-xl); font-weight: 700; color: var(--ardoise);
}
.chiffres { display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: var(--e4); }
@media (min-width: 700px) { .chiffres { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.chiffres li { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-m); padding: var(--e3); }
.chiffres b { display: block; font-size: var(--t-xl); color: var(--canard-fonce); }
.chiffres span { font-size: var(--t-xs); color: var(--texte-2); }

/* ---------- 27. Recherche : suggestions ----------------- */
.suggestions {
  border: 2px solid var(--canard); border-top: 0; border-radius: 0 0 var(--r-m) var(--r-m);
  background: var(--blanc); overflow: hidden;
}
.suggestions h3 {
  font-size: var(--t-xs); color: var(--texte-2); font-weight: 700;
  padding: var(--e3) var(--e4) var(--e1); background: var(--perle);
}
.suggestions a {
  display: flex; gap: var(--e3); align-items: center; min-height: var(--cible);
  padding: var(--e2) var(--e4); color: var(--ardoise); text-decoration: none;
  border-top: 1px solid var(--filet);
}
.suggestions a:hover { background: var(--canard-clair); }
.suggestions a img { width: 40px; height: 40px; object-fit: contain; background: var(--perle); border-radius: var(--r-s); }
.suggestions .type { margin-left: auto; font-size: var(--t-xs); color: var(--texte-2); white-space: nowrap; }
.suggestions mark { background: var(--menthe); color: inherit; font-weight: 700; }

/* ---------- 28. Calculateur DIY ------------------------- */
.calc-resultat {
  background: var(--menthe-pale); border: 1px solid #BFE4DF; border-radius: var(--r-l); padding: var(--e5);
}
.calc-resultat dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--e3) var(--e4); }
.calc-resultat dt { color: var(--texte-2); font-size: var(--t-s); }
.calc-resultat dd { font-size: var(--t-l); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.calc-resultat .gros { font-size: var(--t-4xl); line-height: 1; color: var(--canard-fonce); }

/* ---------- 29. Commandes du compte --------------------- */
.cmd { border: 1px solid var(--filet); border-radius: var(--r-l); overflow: hidden; }
.cmd__tete {
  display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap;
  padding: var(--e4); background: var(--perle);
}
.cmd__tete b { font-size: var(--t-m); }
.cmd__tete .badge { margin-left: auto; }
.cmd__corps { padding: var(--e4); }
.cmd__lignes li { display: flex; gap: var(--e3); align-items: center; padding: var(--e3) 0; border-top: 1px solid var(--filet); font-size: var(--t-s); }
.cmd__lignes li:first-child { border-top: 0; }
.cmd__lignes img { width: 56px; height: 56px; object-fit: contain; background: var(--perle); border-radius: var(--r-s); flex: 0 0 56px; }
.cmd__lignes .btn { margin-left: auto; }
.cmd__pied { display: flex; gap: var(--e3); flex-wrap: wrap; padding: var(--e4); border-top: 1px solid var(--filet); background: var(--blanc); }
.cmd__pied .btn { flex: 1 1 200px; }

/* ---------- 30. Planche de composants ------------------- */
.demo { border: 1px solid var(--filet); border-radius: var(--r-l); padding: var(--e5) var(--e4); margin-top: var(--e4); }
.demo > h3 { font-size: var(--t-m); color: var(--canard-fonce); margin-bottom: var(--e2); }
.demo > .note-demo { font-size: var(--t-s); color: var(--texte-2); margin-bottom: var(--e4); }
/* Les composants sont montrés à la largeur où ils vivent vraiment (une colonne de
   lecture), pas étirés sur toute la page : sinon la planche ment sur leur allure. */
.demo__zone { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-start; max-width: 760px; }
.demo__zone .quantite { justify-self: start; }
.demo__zone > * { max-width: 100%; }
.echantillon { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.echantillon li { border: 1px solid var(--filet); border-radius: var(--r-m); overflow: hidden; }
/* Le blanc doit rester visible sur du blanc : un filet intérieur, pas une bordure. */
.echantillon .pastille { height: 64px; box-shadow: inset 0 0 0 1px rgba(30,42,42,.10); }
.echantillon .txt { padding: var(--e3); font-size: var(--t-xs); }
.echantillon b { display: block; font-size: var(--t-s); }
.echelle li { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3) 0; border-top: 1px solid var(--filet); }
.echelle li > span:first-child { font-size: var(--t-xs); color: var(--texte-2); }
.echelle li > span:last-child { min-width: 0; line-height: 1.15; }
@media (min-width: 700px) {
  .echelle li { flex-direction: row; gap: var(--e5); align-items: baseline; }
  .echelle li > span:first-child { width: 190px; flex: 0 0 190px; }
}

/* ---------- 31. Détails du logo et de l'en-tête --------- */
/* Le point du i est le seul geste graphique du logotype :
   « ı » sans point + une pastille canard posée dessus. */
.marque__i { position: relative; display: inline-block; line-height: 1; }
.marque__i::after {
  content: ""; position: absolute; left: 52%; top: .09em;
  width: .2em; height: .2em; border-radius: var(--r-rond);
  background: var(--canard); transform: translateX(-50%);
}
.entete__menu { flex: 0 0 auto; }
@media (min-width: 900px) {
  .entete__menu { display: none; }
  .entete__barre { flex-wrap: nowrap; }
  .recherche--entete { max-width: 420px; }
}
@media (max-width: 899px) {
  .entete__barre { flex-wrap: wrap; }
  .entete__barre .recherche, .entete__barre .habituels-lien { flex: 1 0 100%; }
  .entete__barre .recherche { order: 3; padding-bottom: 0; margin-bottom: var(--e3); }
  .entete__barre .habituels-lien { order: 4; }
}
.lot__txt { display: flex; flex-direction: column; min-width: 0; }

/* ---------- 32. Planche de composants : neutraliser le fixe ---------- */
.demo-statique .toast, .demo-statique .cookies, .demo-statique .barre-achat,
.demo-statique .cartouche-nicotine {
  position: static; transform: none; box-shadow: none;
}
.demo-statique .cartouche-nicotine .conteneur { padding-inline: var(--e4); }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92em;
       background: var(--perle); padding: 2px 6px; border-radius: var(--r-s); }