/* ==================================================================
   OptiStock — la charte.

   Toutes les valeurs viennent d'optisell.fr, relevées le 07/09/2026 dans
   sa feuille de style. Rien n'est arrondi, rien n'est inventé : le site
   vitrine est la seule source de vérité. Si la charte y bouge, elle bouge
   ici et nulle part ailleurs.

   ÉCRIT POUR LE TÉLÉPHONE D'ABORD. Les styles de base sont ceux du mobile ;
   le desktop n'arrive qu'à partir de 900 px, en @media (min-width). C'est
   l'inverse de l'habitude, et c'est voulu : quatre clients sur cinq
   arriveront sur un écran de 390 px.
   ================================================================== */

:root {
  --bg: #070908;
  --bg2: #0C0E0D;
  --card: rgba(255, 255, 255, 0.04);
  --card2: rgba(255, 255, 255, 0.025);
  --border: rgba(255, 255, 255, 0.09);
  --border2: rgba(0, 230, 118, 0.22);
  --mint: #00E676;
  --mint2: #12F58A;
  --cyan: #00F3FF;
  --red: #FF5568;
  --purple: #B14EFF;
  --text: #FFFFFF;
  --muted: #9BA0A0;
  --muted2: #6C7270;

  /* Le noir sur lequel le vert se pose : c'est celui des boutons du site. */
  --sur-mint: #04110A;

  --police: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Les chiffres gardent la police du site. Ils sont seulement mis en
     chasse fixe (`font-variant-numeric: tabular-nums`) là où ils doivent
     s'aligner d'une ligne à l'autre — un compte à rebours dont les chiffres
     ont des largeurs différentes tremble à chaque seconde. */

  /* La hauteur de la barre collée en bas, pour que le contenu ne passe
     jamais dessous. Elle inclut la zone de la barre d'accueil de l'iPhone. */
  --barre-bas: 104px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* « hidden » doit toujours cacher. Sans ce !important, une classe qui pose
   son propre display (le menu du téléphone : display:flex) l'emporte : le
   menu fermé restait posé, transparent mais cliquable, et un toucher en haut
   de l'écran ouvrait les mentions légales (vu le 15/09/2026). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--mint); text-decoration: none; }
a:hover { color: var(--mint2); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }

img { max-width: 100%; }

h1, h2, h3 { margin: 0; text-wrap: balance; }

/* ---------- la lueur verte du haut, reprise du site ---------- */
.lueur {
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% -10%, rgba(0, 230, 118, 0.15) 0%, rgba(7, 9, 8, 0) 64%);
  z-index: 0;
}

/* Un grain très fin sur toute la page.
   Le noir nu se lit comme « pas fini » : une trame à peine perceptible lui
   donne de la matière, comme le papier d'une affiche. C'est un SVG en ligne,
   donc aucun fichier à charger et aucun coût réseau. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  /* rien d'animé ici : le grain est fixe, c'est une texture, pas un effet */
}

/* ---------- gabarit ---------- */
.page { position: relative; z-index: 1; padding-bottom: var(--barre-bas); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- barre du haut ---------- */
.tete {
  position: relative;
  z-index: 3;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.marque { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); }
.marque span { color: var(--mint); }
.par { font-size: 11.5px; font-weight: 700; color: var(--muted2); letter-spacing: 0.3px; }
.tete-nav { display: none; }
.tete-fin { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* Une cible tactile ne descend jamais sous 44 px. */
.rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  color: inherit;
}
.rond:hover { background: rgba(255, 255, 255, 0.05); }
.pastille {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--mint);
  color: var(--sur-mint);
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pastille[hidden] { display: none; }

.membre {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 30px;
  background: rgba(0, 230, 118, 0.10);
  border: 1px solid var(--border2);
  font-size: 12px;
  font-weight: 800;
  color: var(--mint);
  letter-spacing: 0.3px;
}

/* ---------- titres ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mint);
}
.point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.9);
}
h1.titre {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.4px;
  margin: 14px 0 12px;
}
h1.titre em { font-style: normal; color: var(--mint); }
.chapo { font-size: 15px; line-height: 1.58; color: var(--muted); margin: 0; }

/* ---------- deux compteurs ---------- */
.compteurs { display: flex; gap: 10px; margin-top: 20px; }
.compteur {
  /* min-width a zero : sans lui, un enfant en nowrap refuse de rétrécir et
     déborde de sa carte au lieu de la faire grandir. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 13px 15px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
}
.compteur.vert { border-color: var(--border2); }
.compteur .lab {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted2);
}
.compteur .val {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
  /* « 13 j 20 h » ne doit jamais passer a la ligne : un compte a rebours
     coupe en deux se lit comme deux chiffres. */
  white-space: nowrap;
}
.compteur .val small { font-size: 12px; color: var(--muted); font-weight: 600; }
.compteur.vert .val { color: var(--mint); }

/* Les dernières vingt-quatre heures : le chiffre respire. Assez lent pour
   qu'on le remarque sans que ça clignote — et coupé net pour qui a demandé
   moins d'animation. */
.compteur .val.urgent { color: var(--mint); animation: souffle 2.4s ease-in-out infinite; }
.compteur .val.fini { color: var(--muted2); }
@keyframes souffle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  .compteur .val.urgent { animation: none; }
}
.compteur.vert .val small { color: var(--muted2); }

/* ---------- filtres, qui défilent horizontalement ---------- */
.filtres {
  display: flex;
  gap: 9px;
  margin-top: 22px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.filtres::-webkit-scrollbar { display: none; }
.puce {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 30px;
  font-family: var(--police);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
}
.puce.on { background: var(--mint); color: var(--sur-mint); }

/* ---------- les cartes de lot ---------- */
.lots { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.lot {
  display: block;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  color: inherit;
  transition: transform 0.25s, border-color 0.25s;
}
.lot:hover { border-color: rgba(0, 230, 118, 0.35); color: inherit; }
/* La photo remplit son cadre sans se déformer.
   Elle est posée en absolu : une image en flux impose sa taille naturelle au
   conteneur, et une photo d'iPhone débordait alors de toute la page. Ici c'est
   le cadre qui commande, jamais le fichier. */
.lot-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lot-image {
  position: relative;
  /* Plus haute qu'avant : c'est la marchandise qui vend, pas la fiche. */
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Un voile sombre en haut de la photo : sans lui, les pastilles « marge » et
   « pièces » disparaissent dès qu'un lot est photographié sur fond clair. */
.lot-image::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 74px;
  background: linear-gradient(to bottom, rgba(7, 9, 8, 0.72), rgba(7, 9, 8, 0));
  pointer-events: none;
}
.lot-image svg { opacity: 0.9; }
.jeton {
  position: absolute;
  top: 13px;
  padding: 6px 11px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.jeton { z-index: 2; }
.jeton.marge {
  left: 13px;
  padding: 7px 13px;
  background: var(--mint);
  border: 0;
  color: var(--sur-mint);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.2px;
  box-shadow: 0 6px 20px rgba(0, 230, 118, 0.28);
}
.jeton.pieces {
  right: 13px;
  background: rgba(7, 9, 8, 0.82);
  color: #E6EAE8;
  font-weight: 800;
}

.lot-corps { padding: 16px 20px 20px; }

/* Le titre EN SURIMPRESSION, posé sur un dégradé qui monte du bas de la
   photo. Le dégradé n'est pas décoratif : sans lui, un titre blanc disparaît
   dès qu'un lot est photographié sur fond clair. */
.lot-sur {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 44px 18px 16px;
  background: linear-gradient(to top, rgba(7, 9, 8, 0.94) 22%, rgba(7, 9, 8, 0) 100%);
}
.lot-cat {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mint);
}
.lot-titre {
  font-size: 21px; font-weight: 800; letter-spacing: -0.6px;
  margin-top: 3px; line-height: 1.15; text-wrap: balance;
}
.lot-resume { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }

/* L'écart entre les deux prix — le seul argument d'achat, donc le plus gros
   objet de la carte. */
.lot-ecart {
  display: flex; align-items: baseline; gap: 12px;
  /* Chiffres à chasse fixe SANS changer de police : les prix restent alignés
     d'une carte à l'autre, dans la typographie du site. */
  font-variant-numeric: tabular-nums;
}
.lot-achat { font-size: 28px; font-weight: 800; letter-spacing: -1.2px; }
.lot-revente { font-size: 28px; font-weight: 800; letter-spacing: -1.2px; color: var(--mint); }
.lot-fleche { color: var(--muted2); flex: 0 0 auto; align-self: center; }
.lot-reste { font-size: 13px; color: var(--muted); margin-top: 7px; }
.lot-reste b { color: var(--text); font-weight: 800; }
.lot-ecart-parti { color: var(--muted2); }
.lot-parti { font-family: var(--police); font-size: 13.5px; font-weight: 700; }
.lot-prix { display: flex; align-items: flex-end; gap: 16px; margin-top: 16px; }
.lot-prix .lab {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted2);
}
.lot-prix .gros { font-size: 25px; font-weight: 800; letter-spacing: -0.9px; margin-top: 2px; }
.lot-prix .vert { font-size: 15px; font-weight: 800; color: var(--mint); margin-top: 2px; }

/* Un lot parti reste visible : la rareté est la mécanique du drop. */
.lot.epuise .lot-corps { opacity: 0.55; }
.lot.epuise .lot-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 8, 0.55);
}
.epuise-sceau {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 9px 18px;
  border-radius: 30px;
  background: rgba(7, 9, 8, 0.9);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.6px;
  z-index: 1;
}
.barre-prix { text-decoration: line-through; text-decoration-color: var(--muted2); }

/* ---------- carte du prochain drop ---------- */
.prochain {
  align-self: start;
  border-radius: 24px;
  padding: 24px 20px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 230, 118, 0.10) 0%, rgba(9, 11, 10, 0) 58%),
    var(--card2);
  border: 1px dashed rgba(0, 230, 118, 0.30);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prochain h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.22; }
.prochain p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  font-family: var(--police);
  font-weight: 800;
  font-size: 15.5px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.btn-mint { background: var(--mint); color: var(--sur-mint); box-shadow: 0 10px 30px rgba(0, 230, 118, 0.32); }
.btn-mint:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 230, 118, 0.5); color: var(--sur-mint); }
.btn-fantome { background: rgba(255, 255, 255, 0.04); color: var(--text); border: 1px solid var(--border); }
.btn-fantome:hover { border-color: rgba(0, 230, 118, 0.5); background: rgba(0, 230, 118, 0.06); color: var(--text); }
.btn-large { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- la barre collée en bas ----------
   L'action principale ne défile jamais. C'est la règle du site sur
   téléphone, et la raison pour laquelle .page réserve --barre-bas. */
.bas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 14px));
  background: rgba(7, 9, 8, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
}
.bas-info { flex-grow: 1; min-width: 0; }
.bas-info .l1 { display: flex; align-items: baseline; gap: 7px; }
.bas-info .fort { font-size: 17px; font-weight: 800; letter-spacing: -0.5px; color: var(--mint); }
.bas-info .doux { font-size: 13px; color: var(--muted); }
.bas-info .l2 { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.bas .btn { flex: 0 0 auto; }
.bas .btn-large { flex: 1 1 auto; width: auto; }
.bas-note { font-size: 11.5px; color: var(--muted2); text-align: center; line-height: 1.5; }

/* ---------- blocs ---------- */
.bloc {
  border-radius: 22px;
  background: var(--card2);
  border: 1px solid var(--border);
  padding: 18px 20px;
  margin-top: 16px;
}
.bloc.plein { background: var(--card); }
.bloc h3 { font-size: 15px; font-weight: 800; }
.bloc-vert {
  border-radius: 22px;
  padding: 20px;
  margin-top: 22px;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(0, 230, 118, 0.13) 0%, rgba(9, 11, 10, 0) 64%),
    var(--card2);
  border: 1px solid var(--border2);
}
.ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}
.ligne + .ligne { margin-top: 9px; }
.ligne .k { color: var(--muted); }
.ligne .v { font-weight: 800; }
.ligne .v.gris { color: var(--muted2); }
.filet { height: 1px; background: var(--border); margin: 12px 0; }
.note { font-size: 11.5px; line-height: 1.5; color: var(--muted2); margin-top: 14px; }

/* Les trois chiffres de la fiche. Taille téléphone par défaut, comme partout
   ici : c'est le petit écran qui commande, le grand s'adapte plus bas. */
/* Ce qu'on paie est en gras — le prix du lot et le prix a la piece. Ce qu'on
   espere, la revente, est en italique et sans gras : deux chiffres empiles se
   distinguent mieux par leur dessin que par leur couleur seule, et l'italique
   dit tout de suite lequel des deux est une estimation. (25/09/2026) */
.prix-gros {
  font-size: 33px; font-weight: 800; letter-spacing: -1.3px;
  font-variant-numeric: tabular-nums;
}
.reste-marge { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; color: var(--mint); }
.reste-chiffre {
  font-size: 42px; font-weight: 800; letter-spacing: -1.8px;
  color: var(--mint); line-height: 1; font-variant-numeric: tabular-nums;
}
.pan-prix, .tiroir-total span:last-child, .sond-part { font-variant-numeric: tabular-nums; }

.avec-icone { display: flex; gap: 13px; align-items: flex-start; }
.avec-icone svg { flex: 0 0 auto; margin-top: 2px; }
/* L'icone de l'app, a sa taille reelle : elle porte deja son fond noir et son
   degrade, on ne lui ajoute qu un coin arrondi et un liseré pour la detacher
   de la carte. */
.logo-app {
  flex: 0 0 auto; width: 42px; height: 42px;
  border-radius: 11px; border: 1px solid var(--border);
  display: block;
}
.avec-icone b { display: block; font-size: 14.5px; font-weight: 800; }
.avec-icone p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 5px 0 0; }

/* ---------- état vide / chargement ---------- */
.vide {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted2);
  font-size: 14px;
  border: 1px dashed var(--border);
  border-radius: 22px;
  margin-top: 20px;
}

/* ---------- pied ---------- */
.pied {
  padding: 26px 20px 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted2);
}

/* ==================================================================
   DESKTOP — à partir de 900 px seulement.
   ================================================================== */
@media (min-width: 900px) {
  :root { --barre-bas: 0px; }

  body { font-size: 16px; }
  .wrap { padding: 0 40px; }

  .tete { height: 74px; gap: 34px; }
  .tete-nav { display: flex; align-items: center; gap: 26px; }
  .tete-nav a { font-size: 14px; font-weight: 600; color: var(--muted); }
  .tete-nav a.on, .tete-nav a:hover { color: var(--text); font-weight: 700; }
  .membre { display: inline-flex; }

  h1.titre { font-size: 40px; letter-spacing: -1.6px; margin: 14px 0 14px; max-width: 15ch; }
  .chapo { font-size: 17px; max-width: 520px; }

  .haut-drop { display: flex; align-items: flex-end; gap: 40px; }
  .haut-drop > div:first-child { flex: 1 1 auto; max-width: 640px; }
  .compteurs { margin-top: 0; flex: 0 0 auto; gap: 14px; padding-bottom: 6px; align-self: end; }
  .compteur { width: 168px; padding: 20px 22px; border-radius: 20px; }
  .compteur .val { font-size: 34px; letter-spacing: -1.3px; margin-top: 8px; }
  .compteur .val small { font-size: 17px; }

  .lots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .lot-image { height: 232px; }
  .lot-corps { padding: 20px 22px 22px; }
  .lot-titre { font-size: 19px; }

  /* La barre du bas n'a plus de raison d'être : tout tient à l'écran. */
  .bas {
    position: static;
    background: none;
    backdrop-filter: none;
    border-top: 0;
    padding: 0;
  }
}

/* ==================================================================
   LA VUE TÉLÉPHONE — un bouton, pour regarder le site en 390 px
   depuis l'ordinateur. C'est un outil de travail, pas une partie du
   site : il ne s'affichera jamais chez un client.
   ================================================================== */
#voir-tel {
  position: fixed;
  right: 18px;
  bottom: calc(var(--barre-bas) + 16px);
  z-index: 60;
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: rgba(12, 14, 13, 0.92);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-family: var(--police);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
#voir-tel:hover { border-color: var(--mint); color: var(--mint); }

/* On ne le propose que sur un vrai grand écran : sur un téléphone,
   la vue téléphone n'a aucun sens. */
@media (min-width: 900px) {
  #voir-tel { display: inline-flex; }
}

/* L'état « vue téléphone » : le corps devient un écran de 390 px, posé
   au milieu, et TOUTES les règles desktop sont annulées — sinon on
   regarderait la mise en page du bureau dans un cadre étroit, ce qui
   ne prouve rien. */
html.tel { background: #000; --barre-bas: 0px; }

/* Le cadre est un ÉCRAN : hauteur fixe, défilement à l'intérieur. C'est ce
   qui permet à la barre du bas de rester collée au bas du téléphone au lieu
   de se caler sur la fenêtre du navigateur — elle traversait tout l'écran. */
html.tel body {
  width: 390px;
  /* 844 px, la hauteur d un iPhone — mais jamais plus haut que la fenetre,
     sinon le bas du telephone (donc la barre d action) sort de l ecran et on
     ne voit pas ce qu on est venu verifier. */
  height: min(844px, calc(100vh - 56px));
  margin: 28px auto;
  border: 10px solid #17191A;
  border-radius: 44px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  scrollbar-width: none;
}
html.tel body::-webkit-scrollbar { display: none; }

/* Collée en bas du cadre, et elle occupe sa place en fin de flux : pas
   besoin de réserver une marge sous le contenu. */
html.tel .bas {
  position: sticky;
  bottom: 0;
  margin-top: auto;
}
html.tel .page { padding-bottom: 0; }

/* Les deux outils restent aux coins de l'écran, pas du téléphone. */
html.tel #voir-tel { position: fixed; right: 24px; bottom: 24px; }

@media (min-width: 900px) {
  html.tel .page { padding-bottom: 104px; }
  html.tel body { font-size: 15px; }
  html.tel .wrap { padding: 0 20px; }
  html.tel .tete { height: 56px; gap: 12px; }
  html.tel .tete-nav { display: none; }
  html.tel .membre { display: none; }
  html.tel h1.titre { font-size: 33px; letter-spacing: -1.4px; margin: 14px 0 12px; }
  html.tel .chapo { font-size: 15px; max-width: none; }
  html.tel .haut-drop { display: block; }
  html.tel .compteurs { margin-top: 20px; gap: 10px; padding-bottom: 0; }
  html.tel .compteur { width: auto; padding: 14px 16px; border-radius: 18px; }
  html.tel .compteur .val { font-size: 24px; letter-spacing: -0.9px; margin-top: 5px; }
  html.tel .compteur .val small { font-size: 13px; }
  html.tel .lots { display: flex; flex-direction: column; gap: 16px; }
  html.tel .lot-image { height: 300px; }
  html.tel .lot-corps { padding: 18px 20px 20px; }
  html.tel .lot-titre { font-size: 18px; }
  /* Collee au bas du CADRE, pas de la fenetre : le cadre est un conteneur
     de defilement, donc sticky suffit et suit le telephone. */
  html.tel .bas {
    position: sticky;
    bottom: 0;
    background: rgba(7, 9, 8, 0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 12px 20px 30px;
  }
  html.tel .deux-colonnes { display: block; }
  html.tel .colonne-achat { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==================================================================
   Règles de bascule mobile / desktop pour la barre du bas.

   `.bas` est une barre de TÉLÉPHONE. Sur grand écran elle disparaît :
   chaque page a son équivalent dans le flux (la colonne d'achat de la
   fiche, le récapitulatif du panier, le bouton de la porte), marqué
   `.desktop-seul`. Garder les deux afficherait deux fois la même action.
   ================================================================== */
.desktop-seul { display: none; }

@media (min-width: 900px) {
  .bas { display: none; }
  .desktop-seul { display: block; }
}

/* En vue téléphone, on remet exactement le comportement du mobile. */
@media (min-width: 900px) {
  html.tel .bas { display: flex; }
  html.tel .bas.bas-colonne { display: block; }
  html.tel .desktop-seul { display: none; }
}
.bas.bas-colonne { display: block; }

/* ==================================================================
   La porte
   ================================================================== */
.porte { padding-top: 26px; }
.cadenas {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: rgba(0, 230, 118, 0.10); border: 1px solid var(--border2);
}
.porte-titre { font-size: 29px; letter-spacing: -1.2px; margin: 20px 0 12px; }
.etats {
  display: flex; flex-direction: column; gap: 1px;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--border);
  margin-top: 24px;
}
.etat-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; min-height: 54px; background: var(--card2);
}
.etat-ligne svg { flex: 0 0 auto; }
.etat-ligne .t { font-size: 13.5px; font-weight: 700; flex-grow: 1; }
.etat-ligne .v { font-size: 12.5px; color: var(--muted2); }

.porte-droite { padding-top: 26px; }
.porte-h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.9px; line-height: 1.14; margin-top: 14px; }
.apercu { display: flex; gap: 12px; margin-top: 20px; overflow: hidden; }
.apercu-carte {
  flex: 0 0 148px; border-radius: 18px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
}
.apercu-image { height: 96px; filter: blur(3px); }
.apercu-lignes { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.apercu-lignes span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); display: block; }
.apercu-lignes span.vert { height: 12px; background: rgba(0, 230, 118, 0.22); }
.porte-note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; font-size: 12.5px; color: var(--muted2); line-height: 1.5;
}

@media (min-width: 900px) {
  .porte {
    display: flex; align-items: center; gap: 64px;
    min-height: 70vh; padding-top: 60px;
  }
  .porte-gauche {
    flex: 0 0 452px;
    padding: 38px 36px 34px;
    border-radius: 24px;
    background: var(--card);
    border: 1px solid var(--border);
  }
  .porte-titre { font-size: 30px; }
  .porte-droite { flex: 1 1 auto; padding-top: 0; }
  .porte-h2 { font-size: 40px; letter-spacing: -1.3px; }
}
html.tel .porte { display: block; min-height: 0; padding-top: 26px; }
html.tel .porte-gauche { flex: none; padding: 0; border: 0; background: none; border-radius: 0; }
html.tel .porte-titre { font-size: 29px; }
html.tel .porte-h2 { font-size: 24px; letter-spacing: -0.9px; }
html.tel .porte-droite { padding-top: 26px; }

/* ==================================================================
   La fiche d'un lot
   ================================================================== */
.galerie {
  position: relative; height: 420px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Le porte-image occupe toute la galerie. Il tenait un pictogramme de 130 px
   à l'origine ; sans dimensions propres, la première vraie photo est sortie
   du cadre et a recouvert le titre, l'en-tête et le prix. */
[data-galerie-forme] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sur une carte, la photo est une vignette : elle remplit et se recadre, pour
   que toutes les cartes s'alignent. Sur la FICHE, on vient voir la
   marchandise — on montre donc la photo entière, quitte à laisser du fond
   autour. Recadrer ici, c'est cacher une partie du lot à quelqu'un qui
   s'apprête à l'acheter. */
.galerie .lot-photo { object-fit: contain; }

/* Les points et le compteur portent leur propre fond plutot qu un voile
   pose sur toute la largeur : un lot photographie sur fond blanc — le cas
   normal — se retrouvait avec un degrade gris sale en bas de l image. */
.galerie-points, .galerie-compte, .galerie-retour { z-index: 2; }
.galerie-points {
  padding: 7px 11px; border-radius: 20px;
  background: rgba(7, 9, 8, 0.72); backdrop-filter: blur(6px);
}
.galerie-retour {
  position: absolute; top: 12px; left: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(7, 9, 8, 0.7);
  display: inline-flex; align-items: center; justify-content: center;
}
.galerie-points { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.galerie-points span {
  width: 8px; height: 8px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.42);
  transition: width 0.2s, background 0.2s;
}
/* La zone cliquable dépasse le point : au doigt, 8 px ne s'attrapent pas. */
.galerie-points span::before {
  content: ""; position: absolute; width: 26px; height: 34px;
  transform: translate(-9px, -13px);
}
.galerie-points span { position: relative; }
.galerie-points span.on { width: 22px; background: var(--mint); }
.galerie-compte {
  position: absolute; bottom: 16px; right: 16px;
  padding: 6px 12px; border-radius: 20px; background: rgba(7, 9, 8, 0.8);
  font-size: 11.5px; font-weight: 700; color: var(--muted);
}
.fiche-titre { font-size: 30px; letter-spacing: -1.2px; margin: 12px 0 10px; }

.detail { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.detail-ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 14px 20px; background: var(--bg2);
}
.detail-ligne .k { font-size: 12.5px; color: var(--muted); flex: 0 0 auto; }
.detail-ligne .v { font-size: 14px; font-weight: 700; text-align: right; }
.detail-ligne .v.ok { color: var(--mint); }

/* Les grades (25/09/2026), en bulles rectangulaires : vert pour A, orange pour
   B, orange foncé pour C. Trois teintes qui se distinguent aussi par leur
   clarté, pas seulement par leur couleur — un daltonien lit quand même l'ordre.
   Les pourcentages sont en chiffres tabulaires : les bulles s'alignent d'un lot
   à l'autre. */
.detail-ligne .v .grade {
  display: inline-block; margin-left: 6px; padding: 4px 9px; border-radius: 7px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.grade-a { background: rgba(0,230,118,0.16); border: 1px solid rgba(0,230,118,0.45); color: #6BFFB4; }
.grade-b { background: rgba(255,167,38,0.15); border: 1px solid rgba(255,167,38,0.45); color: #FFC166; }
.grade-c { background: rgba(214,110,20,0.17); border: 1px solid rgba(214,110,20,0.50); color: #F0A362; }
@media (max-width: 560px) {
  .detail-ligne .v .grade { margin: 3px 0 0 5px; padding: 3px 7px; font-size: 11.5px; }
}

@media (min-width: 900px) {
  /* Sur ordinateur, la fiche est une boutique : les photos à gauche, ce qu'on
     achète à droite. Le bandeau pleine largeur d'avant venait du téléphone —
     étiré sur 1500 px, il ne montrait qu'une bande du milieu de la photo et
     repoussait le prix sous la ligne de flottaison. */
  [data-fiche] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 44px;
    row-gap: 16px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
    padding: 26px 28px 0;
  }
  /* La photo, puis la marge dessous : les deux tiennent dans un écran, sans
     faire défiler. Le texte occupe la colonne de droite sur toute la hauteur. */
  .galerie { grid-column: 1; grid-row: 1; }
  .sous-photo { grid-column: 1; grid-row: 2; margin-top: 0; }
  .deux-colonnes { grid-column: 2; grid-row: 1 / span 2; }

  /* Plus compact que dans la colonne : le chiffre reste gros, tout le reste
     rétrécit. C'est lui qu'on vient lire. */
  .sous-photo { padding: 16px 18px; }
  .sous-photo .reste-chiffre { font-size: 34px; letter-spacing: -1.4px; margin-top: 2px; }
  .sous-photo .reste-marge { font-size: 17px; }
  .sous-photo .reste-detail { margin-top: 12px; }
  .sous-photo .ligne { padding: 4px 0; }
  .sous-photo .note { margin-top: 10px; font-size: 10.5px; line-height: 1.45; }
  .galerie {
    /* La photo ET la marge doivent tenir dans un ecran sans defiler : la
       hauteur suit donc la fenetre, elle ne suit plus le ratio de la photo.
       En 4/5 fixe, le bloc « ce qui vous reste » tombait sous le pli — c est
       exactement ce qu on venait lire. */
    height: clamp(260px, 42vh, 460px);
    aspect-ratio: auto;
    border-radius: 26px;
    border: 1px solid var(--border);
    background: var(--bg2);
    position: sticky;
    top: 24px;
  }
  /* La grille est maintenant portée par la fiche : ce conteneur redevient un
     simple bloc, sans largeur ni marge propres. */
  .deux-colonnes { display: block; max-width: none; padding: 0; }
  .colonne-achat { position: static; }

  /* Sur ordinateur, la colonne de droite doit tenir dans la hauteur de la
     photo : « ce qui vous reste » est la réponse qu'on vient chercher, elle
     ne doit pas demander de faire défiler. Les tailles de téléphone, reprises
     telles quelles sur un grand écran, la poussaient sous le pli. */
  .fiche-titre { font-size: 32px; letter-spacing: -1.2px; margin: 8px 0 8px; }
  .colonne-achat .bloc { margin-top: 16px; padding: 15px 18px; }
  .prix-gros { font-size: 27px; letter-spacing: -1px; }
  .bloc-vert { margin-top: 14px; padding: 17px 18px; }
  .reste-chiffre { font-size: 33px; letter-spacing: -1.3px; }
  .reste-marge { font-size: 17px; }
  .bloc-vert .note { margin-top: 11px; font-size: 11px; }
  .btn-large { padding: 13px 20px; }
}
/* La vue telephone doit defaire TOUT ce que la largeur de fenetre vient
   d activer : le media query regarde la fenetre du navigateur, pas le cadre
   simule. Sans ca, la fiche s affichait en deux colonnes dans un ecran de
   390 px et le texte tombait en colonnes d un mot. */
html.tel [data-fiche] {
  display: block; max-width: none; margin: 0; padding: 0;
}
/* En vue téléphone la grille n'existe plus : le bloc reprend sa respiration
   et se cale dans la largeur du texte. */
html.tel .sous-photo,
.sous-photo {
  margin-left: auto; margin-right: auto;
  width: 100%;
  max-width: 1180px;
}
html.tel .galerie {
  height: 420px; aspect-ratio: auto; max-height: none;
  /* relative, jamais static : le porte-image est en absolu et se raccroche
     au premier ancetre positionne. En static, la photo sortait du cadre et
     s affichait plus bas dans la page. */
  border-radius: 0; border: 0; position: relative;
}
html.tel .fiche-titre { font-size: 30px; letter-spacing: -1.2px; }

/* ==================================================================
   Le panier
   ================================================================== */
.pan-ligne {
  display: flex; gap: 14px; padding: 14px;
  border-radius: 20px; background: var(--card2); border: 1px solid var(--border);
}
.pan-ligne + .pan-ligne { margin-top: 12px; }
/* relative et overflow hidden, comme tout porte-image du site : la photo
   est posee en absolu et se raccrocherait sinon au premier ancetre positionne
   — dans le tiroir, elle prenait toute la hauteur du panneau. */
.pan-image {
  flex: 0 0 72px; height: 72px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.pan-txt { flex-grow: 1; min-width: 0; }
.pan-titre { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); }
.pan-titre:hover { color: var(--mint); }
.pan-cat { font-size: 12px; color: var(--muted2); margin-top: 3px; }
.pan-bas { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.pan-prix { font-size: 17px; font-weight: 800; }
.pan-retirer {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-family: var(--police); font-size: 12.5px; font-weight: 700; color: var(--muted2);
  min-height: 44px; padding: 0 6px;
}
.pan-retirer:hover { color: var(--red); }

.liv {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; border-radius: 18px; min-height: 72px; cursor: pointer;
  background: var(--card2); border: 1px solid var(--border);
  font-family: var(--police); color: var(--text); text-align: left;
}
.liv + .liv { margin-top: 10px; }

/* La progression vers la livraison offerte (25/09/2026). Elle sert à une seule
   chose : montrer ce qui manque, pas féliciter. Le chiffre qui reste est donc
   le plus gros élément du bloc. */
.port-offert {
  margin: 10px 0 12px; padding: 12px 14px; border-radius: 11px;
  background: rgba(255,167,38,0.07); border: 1px solid rgba(255,167,38,0.30);
}
.port-offert.gagne { background: rgba(0,230,118,0.08); border-color: rgba(0,230,118,0.38); }
.port-offert-txt { font-size: 14px; line-height: 1.45; margin-bottom: 10px; }
.port-offert-txt b { color: #FFC166; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.port-offert.gagne .port-offert-txt b { color: var(--mint); }
.port-offert-txt span { color: var(--muted); }
.port-jauge { height: 6px; border-radius: 6px; background: rgba(255,255,255,0.09); overflow: hidden; }
.port-jauge i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #FFA726, #FFC166);
  transition: width .45s cubic-bezier(.22,1,.36,1);
}
.port-offert.gagne .port-jauge i { background: linear-gradient(90deg, #00F3FF, var(--mint)); }
.liv-prix s { color: var(--muted); margin-right: 6px; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .port-jauge i { transition: none; } }
.liv.on { background: var(--card); border-color: var(--border2); }
.rond-choix {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid rgba(255, 255, 255, 0.20);
}
.liv.on .rond-choix { border: 6px solid var(--mint); }
.liv-txt { flex-grow: 1; min-width: 0; }
.liv-txt b { display: block; font-size: 14.5px; font-weight: 800; }
.liv-txt small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.liv-prix { font-size: 15px; font-weight: 800; flex: 0 0 auto; }
.liv:not(.on) .liv-txt b, .liv:not(.on) .liv-prix { color: var(--muted); }

@media (min-width: 900px) {
  .panier-grille {
    display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: start;
  }
  .panier-recap { position: sticky; top: 24px; }
}
html.tel .panier-grille { display: block; }
html.tel .panier-recap { position: static; }

/* ==================================================================
   Le tiroir — le panier, sans quitter la page

   Il n'y a plus de page panier. Un drop se regarde d'une traite : partir
   voir son panier puis revenir, c'est perdre le fil au moment où quelqu'un
   est en train de choisir. Le tiroir garde le drop derrière lui.

   Mesures du téléphone d'abord, comme partout ici : pleine largeur, il
   glisse depuis la droite. L'écran d'ordinateur le borne à 430 px.
   ================================================================== */

.tiroir-fond {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s ease;
}
.tiroir-hote.on .tiroir-fond { opacity: 1; pointer-events: auto; }

.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: 100%;
  display: flex; flex-direction: column;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  /* La courbe finit lentement : un tiroir qui s'arrête net donne
     l'impression d'avoir raté quelque chose. */
  /* Ferme, il est CACHE, pas seulement pousse hors du cadre : la vue
     telephone laissait voir le panneau a cote du telephone, et au clavier on
     tombait dedans en tabulant depuis la page. La visibilite bascule apres la
     glissade a la fermeture, tout de suite a l ouverture. */
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.3s;
  will-change: transform;
}
.tiroir-hote.on .tiroir {
  transform: none;
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}

.tiroir-tete {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.tiroir-drop { font-size: 19px; font-weight: 800; letter-spacing: -0.6px; margin-top: 3px; }
.tiroir-croix {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tiroir-croix:hover { border-color: var(--border2); color: var(--mint); }

/* Le corps défile, la tête et le pied ne bougent pas : le total doit rester
   sous les yeux pendant qu'on retire un lot. */
.tiroir-corps { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 20px; }
/* Une barre de defilement fine : la barre systeme large coupe le panneau en
   deux et n existe sur aucun telephone. */
.tiroir-corps { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.tiroir-corps::-webkit-scrollbar { width: 6px; }
.tiroir-corps::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.tiroir-corps::-webkit-scrollbar-track { background: transparent; }

.tiroir-pied {
  flex: 0 0 auto;
  padding: 15px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.tiroir-total {
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 21px; font-weight: 800; letter-spacing: -0.7px;
}
.tiroir-tva { font-size: 11.5px; color: var(--muted2); margin: 2px 0 13px; }
.tiroir-pied .btn { width: 100%; }
.tiroir-h3 { font-size: 15px; font-weight: 800; margin: 22px 0 12px; }

/* Un bouton qui doit se lire comme un lien : dans un tiroir, tout ce qui a
   l'air d'un bouton a l'air d'acheter. */
.lien-nu {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--mint); font-size: 13.5px; font-weight: 700; text-decoration: underline;
}
.lien-nav {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 14px; font-weight: 700; font-family: inherit;
}
.lien-nav:hover { color: var(--text); }

.note-attention { color: var(--mint); }

/* La page ne défile plus derrière le tiroir : sur téléphone, le doigt
   emportait la liste des lots au lieu du contenu du tiroir. */
html.tiroir-ouvert, html.tiroir-ouvert body { overflow: hidden; }

@media (min-width: 900px) {
  .tiroir { width: 430px; box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55); }
}

/* En vue téléphone simulée, le tiroir se cale sur le CADRE et non sur la
   fenêtre : un panneau qui déborde du téléphone ne montre pas ce qu'on est
   venu vérifier. */
html.tel .tiroir-fond,
html.tel .tiroir {
  top: 28px;
  height: min(844px, calc(100vh - 56px));
  bottom: auto;
  left: 50%;
  right: auto;
  width: 390px;
  margin-left: -195px;
  border-radius: 34px;
}
html.tel .tiroir { border: 1px solid var(--border); overflow: hidden; }
html.tel .tiroir-fond { background: rgba(0, 0, 0, 0.55); }

/* ==================================================================
   Le suivi d'une commande

   Pas de compte à créer pour savoir où est un colis : le numéro et
   l'e-mail suffisent, comme partout ailleurs dans le commerce en ligne.
   ================================================================== */

.suivi-wrap { max-width: 560px; }
.suivi-titre { font-size: 30px; letter-spacing: -1.2px; margin-bottom: 8px; }
.suivi-form { display: flex; flex-direction: column; gap: 13px; }

.champ { display: flex; flex-direction: column; gap: 7px; }
.champ span {
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--muted2);
}
.champ input {
  width: 100%; padding: 14px 15px; border-radius: 13px;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); font-size: 15.5px; font-family: inherit;
  /* 16 px minimum sur iPhone, sinon Safari zoome à la mise au point et la
     page part de travers. 15,5 px suffisent depuis iOS 15, mais on garde la
     marge : le champ est ce qu'on touche en premier sur cette page. */
}
.champ input:focus {
  outline: none; border-color: var(--mint); background: var(--bg);
}
.champ input::placeholder { color: var(--muted2); }

.suivi-erreur {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 85, 104, 0.1); border: 1px solid rgba(255, 85, 104, 0.32);
  color: #FF8A97; font-size: 13px; line-height: 1.5;
}

/* La frise : ce qui est fait, où on en est, ce qui reste. Le trait qui relie
   les points dit que c'est une suite, pas une liste de cases. */
.frise { list-style: none; margin: 18px 0 0; padding: 0 0 0 4px; }
.frise-etape {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 0 0 22px 26px; font-size: 14.5px;
}
.frise-etape:last-child { padding-bottom: 0; }
.frise-etape::before {
  content: ""; position: absolute; left: 6px; top: 15px; bottom: -7px;
  width: 2px; background: var(--border);
}
.frise-etape:last-child::before { display: none; }
.frise-point {
  position: absolute; left: 0; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--bg2);
}
.frise-etape.faite .frise-point { background: var(--mint); border-color: var(--mint); }
.frise-etape.faite::before { background: var(--mint); }
.frise-etape.faite .frise-nom { color: var(--text); font-weight: 700; }
.frise-etape.encours .frise-point {
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.16);
}
.frise-etape.encours .frise-nom { color: var(--text); font-weight: 700; }
.frise-etape.avenir .frise-nom { color: var(--muted2); }
.frise-note {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--mint);
  padding: 3px 9px; border-radius: 20px; background: rgba(0, 230, 118, 0.12);
}

/* ==================================================================
   Le menu du téléphone

   La barre du haut ne tient pas la navigation sur 390 px : elle était
   simplement masquée, et « Mes commandes » devenait inatteignable là où
   arrivent quatre clients sur cinq. Le panneau descend sous la barre —
   le panier occupe déjà la droite, deux panneaux venus du même bord se
   confondraient.
   ================================================================== */

.menu-bouton { display: inline-flex; }

.menu-tel {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  /* Au-dessus du contenu, sous le tiroir du panier (90) : la page porte des
     blocs positionnes qui passaient devant le menu et le rendaient illisible. */
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  /* Fond PLEIN, pas un voile floute : a 97 % d opacite le flou ne sert a
     rien, et il coute cher a composer sur un telephone. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Tant qu'il n'est pas déplié, le menu ne capte aucun toucher. */
.menu-tel:not(.on) { pointer-events: none; }
.menu-tel.on { transform: none; opacity: 1; }

.menu-tel a,
.menu-tel button {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 54 px de haut : une cible qu'on atteint au pouce sans viser. */
  min-height: 54px;
  padding: 0 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.menu-tel a:last-child,
.menu-tel button:last-child { border-bottom: 0; }
.menu-tel .on { color: var(--mint); }

.menu-compte {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--mint); color: #04110A;
  font-size: 11.5px; font-weight: 900; line-height: 20px; text-align: center;
}

/* Les mentions ne sont pas une destination : elles ferment la liste, en plus
   petit, comme dans un pied de page. */
.menu-tel .menu-discret {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted2);
  min-height: 46px;
}

/* Sur grand écran, la navigation tient dans la barre : le bouton disparaît. */
@media (min-width: 900px) {
  .menu-bouton { display: none; }
  .menu-tel { display: none; }
}

/* En vue téléphone simulée, le menu se cale sur le cadre. */
html.tel .menu-bouton { display: inline-flex; }
html.tel .menu-tel {
  display: flex;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
}

/* ==================================================================
   Les mentions légales

   Une page qu'on ne lit pas en entier : elle doit se parcourir. Sommaire
   en haut, sections espacées, et ce qui reste à décider en jaune — pas
   en note de bas de page, où ça se perd.
   ================================================================== */

.legal { max-width: 720px; }
.legal-titre { font-size: 27px; letter-spacing: -1.1px; margin-bottom: 8px; }

.legal-chantier {
  margin-top: 20px; padding: 15px 17px; border-radius: 14px;
  background: rgba(242, 179, 61, 0.09);
  border: 1px solid rgba(242, 179, 61, 0.34);
  font-size: 13.5px; line-height: 1.6; color: #E8D5A8;
}
.legal-chantier b { display: block; color: #F2B33D; margin-bottom: 3px; }

.legal-sommaire {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 10px; padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.legal-sommaire a {
  padding: 8px 13px; border-radius: 20px;
  background: var(--card2); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.legal-sommaire a:hover { color: var(--mint); border-color: var(--border2); }

.legal section { padding-top: 30px; }
.legal h2 {
  font-size: 19px; font-weight: 800; letter-spacing: -0.5px;
  margin: 0 0 4px; color: var(--text);
}
.legal h3 {
  font-size: 14.5px; font-weight: 800; color: var(--text);
  margin: 22px 0 6px;
}
.legal p {
  font-size: 14px; line-height: 1.7; color: var(--muted); margin: 8px 0 0;
}
.legal a { color: var(--mint); }
.legal code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px; color: var(--muted);
  background: var(--card2); padding: 2px 6px; border-radius: 5px;
}

/* La fiche d'identité : deux colonnes sur ordinateur, empilée au téléphone —
   un libellé et sa valeur ne doivent jamais se retrouver sur deux écrans. */
.legal-fiche { margin: 14px 0 0; display: grid; gap: 1px; background: var(--border); }
.legal-fiche dt {
  padding: 12px 15px; background: var(--bg2);
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--muted2);
}
.legal-fiche dd {
  margin: 0; padding: 12px 15px; background: var(--card2);
  font-size: 14px; color: var(--text);
}

/* Ce qui reste à décider se voit de loin. */
.legal mark {
  background: rgba(242, 179, 61, 0.16);
  color: #F2B33D;
  padding: 2px 7px; border-radius: 5px;
  font-size: 13px; font-weight: 700;
}
.legal-attention {
  margin-top: 12px; padding: 13px 15px; border-radius: 12px;
  background: var(--card2); border: 1px solid rgba(242, 179, 61, 0.26);
}
.legal-note { font-size: 13px; color: var(--muted2); margin-top: 14px; }

@media (min-width: 900px) {
  .legal-fiche { grid-template-columns: 210px 1fr; }
  .legal-titre { font-size: 34px; letter-spacing: -1.3px; }
}

/* ==================================================================
   À propos — qui sommes-nous, les grades, le journal
   ================================================================== */

.apropos { max-width: 760px; }
.ap-titre { font-size: 32px; letter-spacing: -1.4px; margin: 10px 0 12px; }
.ap-section { padding-top: 46px; }
.ap-h2 { font-size: 24px; font-weight: 800; letter-spacing: -1px; margin: 10px 0 10px; }
.ap-intro { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }
.ap-note { font-size: 12.5px; line-height: 1.65; color: var(--muted2); margin-top: 16px; }

.ap-trois { display: grid; gap: 12px; margin-top: 26px; }
.ap-carte {
  padding: 18px 20px; border-radius: 18px;
  background: var(--card2); border: 1px solid var(--border);
}
.ap-carte b { display: block; font-size: 15px; font-weight: 800; margin-top: 10px; }
.ap-carte p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 6px 0 0; }
.ap-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 230, 118, 0.12); border: 1px solid var(--border2);
  color: var(--mint); font-size: 13px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Les grades. La lettre est le repère — elle porte la couleur, le reste
   non : trois blocs entièrement colorés se disputeraient l'attention. */
.grades { display: flex; flex-direction: column; gap: 12px; }
.grade {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; border-radius: 18px;
  background: var(--card2); border: 1px solid var(--border);
}
.grade-lettre {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 900; letter-spacing: -0.5px;
}
.grade-a .grade-lettre { background: rgba(0, 230, 118, 0.13); color: var(--mint); }
.grade-b .grade-lettre { background: rgba(242, 179, 61, 0.14); color: #F2B33D; }
.grade-c .grade-lettre { background: rgba(255, 85, 104, 0.13); color: #FF8A97; }
.grade-txt b { display: block; font-size: 15px; font-weight: 800; }
.grade-txt p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 6px 0 0; }

/* Le journal */
.billet {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.billet:first-child { border-top: 0; padding-top: 4px; }
.billet-tete {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--muted2);
}
.billet-punaise {
  padding: 3px 9px; border-radius: 20px;
  background: rgba(0, 230, 118, 0.12); color: var(--mint);
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
}
.billet h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; margin: 8px 0 0; }
.billet p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 8px 0 0; }

/* Le sondage */
.sond { display: flex; flex-direction: column; gap: 9px; }
.sond-choix {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 15px 16px; min-height: 56px;
  border-radius: 14px; background: var(--card2);
  border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 15px; font-weight: 700;
  text-align: left; cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.sond-choix:hover { border-color: var(--border2); }
.sond-choix.on { border-color: var(--mint); background: rgba(0, 230, 118, 0.07); }
.sond-choix.on .rond-choix { border-color: var(--mint); background: var(--mint); }
.sond-envoyer { margin-top: 14px; width: 100%; }

.sond-res {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
  padding: 13px 15px; border-radius: 14px;
  background: var(--card2); border: 1px solid var(--border);
}
.sond-res.mien { border-color: var(--border2); }
.sond-nom { font-size: 14.5px; font-weight: 700; }
.sond-part {
  font-size: 14px; font-weight: 800; color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.sond-jauge {
  grid-column: 1 / -1;
  height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.sond-jauge > span {
  display: block; height: 100%; border-radius: 3px;
  background: var(--mint); transition: width 0.4s;
}

@media (min-width: 900px) {
  .ap-titre { font-size: 42px; letter-spacing: -1.9px; }
  .ap-trois { grid-template-columns: repeat(3, 1fr); }
  .ap-h2 { font-size: 28px; letter-spacing: -1.2px; }
}

/* La vue téléphone défait ce que la largeur de fenêtre vient d'activer : le
   média query regarde la fenêtre du navigateur, jamais le cadre simulé. */
html.tel .ap-trois { grid-template-columns: 1fr; }
html.tel .ap-titre { font-size: 32px; letter-spacing: -1.4px; }
html.tel .ap-h2 { font-size: 24px; letter-spacing: -1px; }
html.tel .legal-fiche { grid-template-columns: 1fr; }
html.tel .legal-titre { font-size: 27px; letter-spacing: -1.1px; }

/* ==================================================================
   La barre du drop

   Le compte à rebours ne tenait pas dans sa carte et disparaissait dès
   qu'on quittait l'accueil. Ici il a la largeur qu'il lui faut et il
   suit partout — c'est le battement du drop, il n'a pas à se chercher.
   ================================================================== */

.barre-drop {
  position: sticky;
  top: 0;
  z-index: 30;
  background:
    linear-gradient(90deg, rgba(255, 85, 104, 0) 55%, rgba(255, 85, 104, 0.07) 100%),
    rgba(7, 9, 8, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.barre-drop-in {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
}
.bd-drop {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--mint);
  flex: 0 0 auto;
}
.bd-lab {
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted2);
  flex: 0 0 auto; margin-left: auto;
}

/* Les quatre cases se repartissent la ligne. Chacune prend la meme part :
   sans une part egale, « 12 » et « secondes » n auraient pas la meme largeur et
   la ligne serait bancale. */
.bd-temps { display: flex; align-items: flex-end; gap: 4px; flex: 1 1 auto; max-width: 420px; }
.bd-case { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.bd-case b {
  color: var(--red);
  font-size: 22px; font-weight: 800; letter-spacing: -0.8px; line-height: 1;
  /* Chasse fixe : sans elle, chaque seconde change la largeur du nombre et
     toute la ligne tremble. */
  font-variant-numeric: tabular-nums;
}
.bd-case span {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--muted2);
}
.bd-temps.urgent b { animation: souffle 2.4s ease-in-out infinite; }
.bd-temps.fini b { color: var(--muted2); }

/* Sur un téléphone, le libellé s'efface : le chiffre parle tout seul, et la
   place est comptée. */
@media (max-width: 560px) {
  .bd-lab { display: none; }
  .bd-restants { display: none; }
  .barre-drop-in { min-height: 42px; }
  .bd-temps b { font-size: 16px; }
}
html.tel .bd-lab, html.tel .bd-restants { display: none; }
html.tel .barre-drop { position: static; }

/* ==================================================================
   REFONTE TÉLÉPHONE — 16/09/2026

   100 % des membres arrivent par l'app, donc sur un téléphone. Les cartes
   faisaient 550 px de haut : un lot et demi par écran. Elles passent à deux
   par ligne, la photo carrée, le titre et l'écart de prix dessous — quatre
   lots visibles d'un coup, et toute la carte se touche (plus de bouton
   « Voir le lot » à viser).
   ================================================================== */

/* Le passage d'une page à l'autre se fond au lieu de clignoter (Safari 18.2+). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.14s; }

/* Aucun délai au toucher, aucun surlignage gris d'iOS sur ce qui se touche. */
a, button, .lot, .puce { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lot:active { transform: scale(0.98); }
.btn:active { transform: scale(0.98); }

/* ---------- le haut de la boutique, ramassé ---------- */
.haut-drop { padding-top: 16px; }
h1.titre { font-size: 23px; letter-spacing: -0.9px; margin: 4px 0 6px; }
.haut-drop .chapo { font-size: 13px; line-height: 1.5; }
.desktop-br { display: none; }
/* Le compteur de lots existe déjà dans la barre du bas : sur téléphone, il
   prenait une ligne entière pour dire la même chose. */
.haut-drop .compteurs { display: none; }

.filtres { margin-top: 14px; gap: 7px; margin-left: -20px; margin-right: -20px; padding: 0 20px 2px; scroll-padding: 0 20px; }
.puce { min-height: 34px; padding: 0 13px; font-size: 12px; }
.puce span { opacity: 0.6; margin-left: 5px; font-weight: 800; }

/* ---------- la grille ---------- */
.lots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.lot { border-radius: 16px; }
.lot-image { height: auto; aspect-ratio: 1 / 1; }
.lot-image svg { width: 56px; height: 56px; }
.lot-image::after { height: 46px; }
.jeton { top: 8px; padding: 4px 8px; font-size: 10px; }
.jeton.marge { left: 8px; padding: 4px 9px; font-size: 12px; box-shadow: 0 4px 14px rgba(0, 230, 118, 0.25); }
.jeton.video, .jeton.brouillon {
  right: 8px; background: rgba(7, 9, 8, 0.82); color: #E6EAE8; font-weight: 800;
}
.jeton.brouillon { top: auto; bottom: 8px; left: 8px; right: auto; font-size: 9px; }
.lot-corps { padding: 9px 11px 12px; }
.lot-cat { font-size: 9.5px; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lot-titre {
  font-size: 14px; letter-spacing: -0.3px; line-height: 1.2; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.4em;
}
.lot-ecart { gap: 5px; margin-top: 7px; flex-wrap: nowrap; }
.lot-achat, .lot-revente { font-size: 16px; letter-spacing: -0.5px; white-space: nowrap; }
.lot-fleche { width: 12px; }
.lot-reste { font-size: 11px; margin-top: 2px; line-height: 1.3; }
.lot-reste b { color: var(--mint); }
.epuise-sceau { padding: 6px 11px; font-size: 10px; white-space: nowrap; }
.lot.epuise .lot-corps { opacity: 0.5; }
.lot.en-paiement .lot-corps { opacity: 0.75; }

/* La carte du prochain drop prend toute la largeur de la grille. */
.lots > .prochain, .lots > .vide { grid-column: 1 / -1; }
.prochain { border-radius: 16px; padding: 18px 16px; gap: 8px; }
.prochain h3 { font-size: 15px; }
.prochain p { font-size: 12.5px; }
.vide-large { margin-top: 6px; }

/* ---------- le squelette, pendant la toute première lecture ---------- */
.lot.squelette { pointer-events: none; }
.lot.squelette .lot-image { background: rgba(255, 255, 255, 0.04); }
.lot.squelette .lot-corps i {
  display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); margin-top: 7px;
}
.lot.squelette .lot-corps i:nth-child(1) { width: 45%; margin-top: 2px; }
.lot.squelette .lot-corps i:nth-child(2) { width: 85%; height: 12px; }
.lot.squelette .lot-corps i:nth-child(3) { width: 65%; height: 14px; background: rgba(0, 230, 118, 0.12); }
@media (prefers-reduced-motion: no-preference) {
  .lot.squelette .lot-image, .lot.squelette .lot-corps i { animation: squelette 1.3s ease-in-out infinite; }
}
@keyframes squelette { 50% { opacity: 0.45; } }

/* ---------- la barre du bas, plus basse ---------- */
:root { --barre-bas: 86px; }
.bas { padding: 9px 16px calc(10px + env(safe-area-inset-bottom, 10px)); gap: 10px; }
.bas-info .fort { font-size: 15px; }
.bas-info .doux { font-size: 12px; }
.bas-info .l2 { font-size: 11px; margin-top: 1px; font-variant-numeric: tabular-nums; }
.bas .btn-large { min-height: 48px; }
.bas-trier { min-height: 42px !important; padding: 0 14px !important; font-size: 13px !important; }

/* ---------- la feuille de tri ---------- */
.feuille-hote { position: fixed; inset: 0; z-index: 95; }
.feuille-fond { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.18s; }
.feuille {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #101312; border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 12px));
  transform: translateY(100%); transition: transform 0.2s ease;
}
.feuille-hote.on .feuille { transform: none; }
.feuille-hote.on .feuille-fond { opacity: 1; }
.feuille-poignee { width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); margin: 4px auto 12px; }
.feuille-titre { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted2); margin: 0 4px 6px; }
.feuille-choix {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 50px; padding: 0 6px; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left;
}
.feuille-choix:last-child { border-bottom: 0; }
.feuille-choix.on { color: var(--mint); }
@media (min-width: 900px) {
  .feuille { left: 50%; right: auto; width: 420px; bottom: 50%; transform: translate(-50%, 60%); border-radius: 20px; opacity: 0; transition: opacity .18s, transform .18s; }
  .feuille-hote.on .feuille { transform: translate(-50%, 50%); opacity: 1; }
}

/* ---------- la fiche : moins de hauteur perdue ---------- */
.galerie { height: min(440px, 92vw); }
.fiche-titre { font-size: 24px; letter-spacing: -0.9px; margin: 6px 0 8px; }
.sous-photo { margin-top: 0; border-radius: 0 0 20px 20px; border-top: 0; padding: 16px 20px; }
.reste-chiffre { font-size: 36px; }
.detail-ligne { padding: 12px 18px; }
[data-fiche] .chapo { font-size: 14px; }

/* ---------- la porte : l'aperçu flouté ---------- */
.apercu { gap: 10px; }
.apercu-carte { flex: 1 1 0; min-width: 0; border-radius: 14px; }
.apercu-image { position: relative; height: auto; aspect-ratio: 1 / 1; filter: none; overflow: hidden; }
.apercu-image img {
  position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover;
  filter: blur(9px) saturate(0.9); transform: scale(1.05);
}
.apercu-cadenas {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(7, 9, 8, 0.75); color: var(--mint); border: 1px solid var(--border2);
}
.apercu-corps { padding: 8px 9px 10px; }
.apercu-cat { font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; color: var(--mint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apercu-flou { filter: blur(4.5px); user-select: none; font-size: 12px; font-weight: 800; margin-top: 3px; white-space: nowrap; }
.apercu-prix { font-size: 13px; }
.apercu-prix b { color: var(--mint); }

/* ---------- fiche : le contact WhatsApp, tout en bas (27/09/2026) ---------- */
.lot-aide {
  margin-top: 18px; padding: 18px 20px 20px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px;
}
.lot-aide h3 { font-size: 16px; margin: 0; }
.lot-aide p { font-size: 13px; color: var(--muted); margin: 4px 0 0; line-height: 1.6; }
.lot-aide .btn { width: 100%; }
@media (min-width: 900px) {
  .lot-aide { flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; }
  .lot-aide .btn { width: auto; flex: 0 0 auto; }
}

/* ---------- la porte : le carrousel du stock (27/09/2026) ----------
   Les photos défilent nettes — c'est la marchandise qui donne envie, et elle
   est déjà publique sur la page d'accueil d'optisell.fr. Le titre et le prix,
   eux, ne sont même pas envoyés : les deux barres grises sont du décor. Un
   vrai prix flouté en CSS se lirait dans le code source. */
.car { overflow: hidden; margin-top: 20px; position: relative; }
/* Les bords s'effacent : sans ça, les vignettes apparaissent et disparaissent
   d'un coup au ras du cadre, et on voit la mécanique. */
.car::before, .car::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46px; z-index: 2; pointer-events: none;
}
.car::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.car::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.car-piste {
  display: flex; gap: 10px; width: max-content;
  animation: car-defile var(--car-duree, 30s) linear infinite;
}
/* La piste porte DEUX fois la même bande : à −50 % on est exactement au début
   du second exemplaire, donc la boucle ne se voit pas. */
@keyframes car-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .car-piste { animation: none; } }

.car-carte {
  width: 152px; flex: 0 0 auto; border-radius: 14px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
}
.car-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #111; }
.car-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-cadenas {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(7, 9, 8, 0.72); color: var(--mint); border: 1px solid var(--border2);
}
.car-corps { padding: 8px 9px 10px; }
.car-cat {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--mint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.car-pieces { font-size: 10px; color: var(--muted2); margin-top: 2px; white-space: nowrap; }
.car-flou { border-radius: 4px; background: rgba(255, 255, 255, 0.11); margin-top: 7px; }
.car-titre { height: 9px; width: 86%; }
.car-prix { height: 12px; width: 58%; background: rgba(0, 230, 118, 0.20); }

/* ---------- ordinateur : même carte, plus de colonnes ---------- */
@media (min-width: 900px) {
  .haut-drop { padding-top: 26px; }
  h1.titre { font-size: 40px; letter-spacing: -1.6px; margin: 14px 0 14px; }
  .haut-drop .chapo { font-size: 17px; }
  .desktop-br { display: inline; }
  .haut-drop .compteurs { display: flex; }
  .filtres { margin-left: 0; margin-right: 0; padding: 0 0 4px; }
  .lots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
  .lot { border-radius: 20px; }
  .lot-corps { padding: 13px 15px 16px; }
  .lot-titre { font-size: 16px; }
  .lot-achat, .lot-revente { font-size: 20px; }
  .lot-reste { font-size: 12.5px; }
  .jeton.marge { font-size: 13px; }
  .galerie { height: clamp(260px, 42vh, 460px); }
  .fiche-titre { font-size: 32px; }
  .sous-photo { border-radius: 22px; border-top: 1px solid var(--border2); }
  .apercu-carte { flex: 0 0 170px; }
}
/* La vue téléphone simulée (outil du PC) suit les règles du téléphone. */
html.tel .lots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.tel .haut-drop .compteurs { display: none; }
html.tel h1.titre { font-size: 23px; }
html.tel .lot-image { height: auto; }
html.tel .lot-corps { padding: 9px 11px 12px; }
html.tel .lot-titre { font-size: 14px; }
html.tel .lot-achat, html.tel .lot-revente { font-size: 16px; }

/* La porte : le bouton du compte gratuit occupe toute la largeur, sous le pouce. */
.bas.bas-colonne .btn { width: 100%; }

/* ---------- le tiroir, ramassé pour le téléphone (16/09/2026) ----------
   Le pied (total + bouton) prenait la moitié de l'écran : la livraison et le
   deuxième lot passaient dessous. */
@media (max-width: 899px) {
  .tiroir-tete { padding-top: 10px; padding-bottom: 10px; }
  .pan-ligne { gap: 11px; padding: 10px; border-radius: 16px; }
  .pan-ligne + .pan-ligne { margin-top: 8px; }
  .pan-image { flex-basis: 56px; height: 56px; border-radius: 11px; }
  .pan-titre { font-size: 14px; }
  .pan-cat { font-size: 11.5px; }
  .pan-prix { font-size: 16px; }
  .tiroir-pied { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .tiroir-pied .ligne { font-size: 12.5px; }
  .tiroir-pied .ligne + .ligne { margin-top: 4px; }
  .tiroir-total { margin: 8px 0 2px; padding-top: 8px; }
  .tiroir-total span { font-size: 18px !important; }
  .tiroir-tva { font-size: 10.5px; margin-bottom: 8px; }
  .tiroir-pied .btn { min-height: 50px; }
  .tiroir-pied .bas-note { font-size: 10.5px; margin-top: 6px; }
  .bloc-vert { padding: 14px 16px; }
  .liv { padding: 11px 12px; }
}

/* Sur téléphone, pas de flou derrière les barres collées : recalculer un flou
   à chaque image pendant le défilement fait saccader les iPhone un peu anciens.
   Un fond presque opaque donne le même rendu, sans ce coût. */
@media (max-width: 899px) {
  .bas, .barre-drop, .galerie-points { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bas { background: rgba(7, 9, 8, 0.97); }
  .barre-drop { background: linear-gradient(90deg, rgba(255, 85, 104, 0) 55%, rgba(255, 85, 104, 0.07) 100%), #0A0C0B; }
  /* Le grain fixe par-dessus toute la page se recompose à chaque défilement. */
  body::after { display: none; }
}

/* ---------- la carte : le prix du lot d'abord (16/09/2026) ----------
   On ne captait pas le prix du lot au premier coup d'œil : « 240 € → 500 € »
   mettait les deux chiffres au même niveau. Le prix est maintenant seul et
   gros ; la revente et la marge passent dessous, sur une bande verte. */
.lot-prix-lot {
  font-size: 21px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.1;
  margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--text);
}
.lot-bande {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-top: 6px; padding: 5px 8px; border-radius: 8px;
  background: #0B7A43; color: #FFFFFF;
  font-size: 11px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums;
}
.lot-bande span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lot-bande b { font-weight: 900; font-size: 12px; white-space: nowrap; }
@media (min-width: 900px) {
  .lot-prix-lot { font-size: 26px; }
  .lot-bande { font-size: 12.5px; padding: 6px 10px; }
  .lot-bande b { font-size: 13.5px; }
}

/* À propos : le contact WhatsApp / SMS, comme sur optisell.fr (16/09/2026). */
.ap-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ap-contact .btn { width: 100%; }
@media (min-width: 900px) { .ap-contact { flex-direction: row; } .ap-contact .btn { width: auto; } }

/* La fiche : le prix à la pièce en tête, ce qui reste sous le prix du lot (16/09/2026). */
.reste-unite { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.bas-reste { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.bas-reste b { color: var(--mint); font-weight: 800; }
.reste-sous-prix { margin-top: 6px; }
.reste-sous-prix .v { color: var(--mint); font-size: 17px; }

/* Le prix d'achat à la pièce, et juste dessous ce qu'on en retire
   (25/09/2026). L'un sous l'autre plutôt que côte à côte : les deux chiffres
   se lisent dans l'ordre où on y pense — ce que ça coûte, puis ce que ça
   rapporte — et la revente reste alignée à gauche sur le gros chiffre. */
.prix-duo { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.revente-piece { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.revente-piece[hidden] { display: none; }
.revente-piece-k {
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted2); line-height: 1;
}
/* Le cyan, et pas le vert du prix d'achat : deux chiffres l'un sous l'autre,
   tous les deux verts et tous les deux en euros, se confondaient au premier
   coup d'œil. La couleur dit lequel on paie et lequel on espère. */
.revente-piece-v {
  font-size: 13.5px; font-weight: 400; font-style: italic; letter-spacing: -0.1px; color: var(--cyan);
  font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap;
}
/* « selon la pièce » : la fourchette n'est pas un prix moyen, elle dépend du
   modèle qu'on sort du carton. Le dire évite qu'on lise le bas de fourchette
   comme une promesse. */
.revente-piece-s { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .revente-piece-v { font-size: 13px; } }
.sous-photo .reste-detail { margin-top: 12px; }