/* ==========================================================================
   Boutique publique.

   Volontairement plus chaleureuse que l'administration : le visiteur n'est pas
   là pour travailler. Mêmes principes techniques cependant — tout passe par
   des jetons, rien n'est codé en dur.
   ========================================================================== */

:root {
  --bg:        #f7f7f9;
  --bg-2:      #eef0f4;
  --surface:   #ffffff;
  --surface-2: #f9fafb;
  --line:      #e4e7ec;
  --line-soft: #eff1f4;

  --ink:   #14171a;
  --ink-2: #474e56;
  --muted: #737b85;

  --accent:      #d1344b;
  --accent-2:    #f0637a;
  --accent-ink:  #ffffff;
  --accent-soft: #fdeef1;
  --accent-line: #f4c3cc;

  --gold:  #e0a32e;
  --ok:    #0f7a3d;   --ok-bg:   #e7f7ed;
  --warn:  #92570a;   --warn-bg: #fdf4e3;
  --err:   #b3261e;   --err-bg:  #fdecea;

  --r-sm: 8px;  --r: 12px;  --r-lg: 18px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --shadow-1: 0 1px 2px rgb(16 25 40 / .05), 0 1px 3px rgb(16 25 40 / .04);
  --shadow-2: 0 6px 18px rgb(16 25 40 / .10);
  --shadow-3: 0 20px 50px rgb(16 25 40 / .26);

  --head-h: 62px;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours l'emporter.
   Un élément à qui le CSS donne un `display` explicite (flex, grid…) ignore
   sinon l'attribut : c'est ainsi qu'une mention « il manque 0,00 € » restait
   affichée alors que le minimum était atteint. */
[hidden] { display: none !important; }


body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;

  /* Le pied de page se cale toujours en bas : sur une page courte il descend
     au bas de la fenêtre, sur une page longue il suit le contenu — sans jamais
     laisser de vide derrière lui. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* `width: 100%` est indispensable : dans une colonne flex, `margin: 0 auto`
   l'emporte sur l'étirement et l'élément se réduit à la largeur de son
   contenu — la grille tombait alors sur une seule colonne. */
main { flex: 1 0 auto; width: 100%; }
.foot { flex: none; width: 100%; }

a { color: var(--accent); }

.icon { display: inline-block; vertical-align: -0.18em; flex: none; stroke: currentColor; }
.muted { color: var(--muted); }
.mono  { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dot   { color: var(--line); }

/* Le lien d'évitement n'apparaît qu'au clavier, mais il doit exister. */
.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* ------------------------------------------------------------------ En-tête */

.shell {
  position: sticky; top: 0; z-index: 40;
  background: rgb(255 255 255 / .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.shell-in {
  max-width: 1240px; margin: 0 auto;
  height: var(--head-h);
  padding: 0 var(--s5);
  display: flex; align-items: center; gap: var(--s5);
}

.logo {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.logo-text { display: flex; flex-direction: column; }
.logo-name { font-weight: 750; font-size: 18px; letter-spacing: -.03em; line-height: 1.1; }
.logo-by {
  font-size: 10.5px; font-weight: 550; line-height: 1.2;
  color: var(--muted); letter-spacing: .02em;
}
.ball {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent) 0 47%, #fff 47% 53%, #e7eaee 53% 100%);
  border: 2px solid var(--ink); flex: none;
}

.shell-nav { display: flex; gap: var(--s1); margin-right: auto; }
.shell-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: 14.5px;
}
.shell-nav a:hover { background: var(--bg-2); color: var(--ink); }
.shell-nav a.on { background: var(--accent-soft); color: var(--accent); }

.cart-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px;
  white-space: nowrap;
}
.cart-btn:hover { border-color: var(--accent-line); }
.cart-btn.has { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cart-count {
  min-width: 21px; height: 21px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--bg-2); color: var(--ink);
  font-size: 12.5px; font-weight: 700;
}
.cart-btn.has .cart-count { background: rgb(255 255 255 / .24); color: #fff; }
.cart-sum { font-variant-numeric: tabular-nums; }

@keyframes pop { 0% { transform: none; } 35% { transform: scale(1.09); } 100% { transform: none; } }
.cart-btn.pop { animation: pop .28s ease; }

/* ------------------------------------------------------------------ Colonne */

main {
  max-width: 1240px; margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
}

h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.035em; margin: 0 0 var(--s2); }
h2 { font-size: 19px; letter-spacing: -.02em; margin: 0 0 var(--s3); }

.page-head { margin-bottom: var(--s5); }
.page-head p { color: var(--ink-2); margin: 0; }
.page-narrow { max-width: 760px; }

/* ------------------------------------------------------------------- Accueil */

.hero {
  background: linear-gradient(135deg, var(--accent) 0%, #a3243a 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
  margin-bottom: var(--s5);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgb(255 255 255 / .07);
}
.hero-in { position: relative; max-width: 640px; }
.hero h1 { color: #fff; font-size: 34px; margin-bottom: var(--s3); }
.hero p { color: rgb(255 255 255 / .9); margin: 0 0 var(--s4); font-size: 16.5px; }
.hero-nums { display: flex; flex-wrap: wrap; gap: var(--s5); margin: 0; font-size: 14.5px; }
.hero-nums b { font-size: 22px; display: block; font-weight: 700; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- Recherche */

.finder {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s4);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--s4);
}
.finder-main { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

.fld { position: relative; display: inline-flex; align-items: center; }
.fld.grow { flex: 1 1 260px; }
.fld.block { display: block; margin-bottom: var(--s3); }
.fld-lab { display: block; font-size: 13px; color: var(--muted); margin-bottom: 3px; font-weight: 550; }
.req, .opt {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; margin-left: 5px; vertical-align: 1px;
}
.req { background: var(--accent-soft); color: var(--accent); }

/* Indication rattachée au champ : sous lui, en petit. Au-dessus et en pleine
   taille, elle se lisait comme une consigne générale du formulaire. */
.fld-hint {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
}
.opt { background: var(--bg-2); color: var(--muted); }

/* Champ obligatoire laissé vide. */
.control.missing {
  border-color: var(--err);
  background: var(--err-bg);
}
.control.missing:focus { box-shadow: 0 0 0 3px var(--err-bg); border-color: var(--err); }
.fld-ic {
  position: absolute; left: 12px; color: var(--muted);
  pointer-events: none; display: inline-flex;
}
.fld-ic + .control { padding-left: 40px; }

.control {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 15px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 13px; min-height: 44px; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.control.small { max-width: 110px; }
.control:hover { border-color: var(--muted); }
.control:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.control::placeholder { color: var(--muted); }

select.control {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23737b85' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.finder-more { margin-top: var(--s3); }
.finder-more summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; color: var(--ink-2); font-size: 14px; font-weight: 550;
  list-style: none; padding: 4px 0;
}
.finder-more summary::-webkit-details-marker { display: none; }
.finder-more summary:hover { color: var(--accent); }
.finder-row {
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end;
  padding-top: var(--s3); margin-top: var(--s2); border-top: 1px solid var(--line-soft);
}

.result-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4);
}
.result-bar p { margin: 0; color: var(--ink-2); }
.price-note {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 13px; margin: var(--s3) 0 0;
}
.price-note .icon { flex: none; }
.side-box .price-note { margin: var(--s2) 0 0; align-items: flex-start; line-height: 1.4; }
.side-box .price-note .icon { margin-top: 2px; }

/* --------------------------------------------------------- Grille de cartes */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  /* Un peu plus d'air qu'ailleurs : l'anneau des cartes au panier déborde de
     3 px et ne doit pas venir toucher la vignette voisine. */
  gap: var(--s5);
}

/* Bordure de 2 px pour TOUTES les vignettes : les versions brillantes en ont
   besoin pour leur dégradé, et une épaisseur différente selon la variante
   rognerait leur largeur intérieure — le texte y passait à la ligne alors
   qu'il tenait sur les autres. */
.tile {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
/* Carte déjà au panier : un ANNEAU EXTÉRIEUR, jamais la couleur de bordure.
   Sur une reverse, la bordure est peinte par un dégradé en `border-box` :
   `border-color` n'y a aucun effet, et le repère y était deux fois moins
   visible que sur une carte ordinaire. L'ombre, elle, se dessine par-dessus
   quelle que soit la variante. */
.tile.in-cart {
  box-shadow: 0 0 0 3px var(--accent);
}
.tile.in-cart:hover {
  box-shadow: 0 0 0 3px var(--accent), var(--shadow-2);
}

.tile-img {
  appearance: none; border: 0; padding: 0; margin: 0;
  display: block; position: relative; width: 100%;
  background: var(--surface-2); cursor: zoom-in; line-height: 0;
}
.tile-img img { width: 100%; aspect-ratio: 245/342; object-fit: cover; display: block; }
.tile-img .no-img {
  display: grid; place-items: center; aspect-ratio: 245/342;
  color: var(--muted); font-size: 12.5px; line-height: 1.4;
}
/* ---------------------------------------------------- Versions brillantes

   Reverse et holo se distinguent mal d'une carte ordinaire sur une vignette de
   170 px. Trois marques les signalent : une bordure irisée, un reflet qui
   balaie l'illustration, et une étiquette franche.
   ------------------------------------------------------------------------- */

/* En bas de l'illustration : en haut, l'étiquette recouvrait le nom imprimé
   sur la carte elle-même. */
.tile-variant {
  position: absolute; bottom: 8px; left: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: #1a1206;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; line-height: 1.25;
  box-shadow: 0 2px 8px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .55);
  background: linear-gradient(100deg,
    #ffd76e 0%, #ffb3c9 22%, #b9e6ff 44%, #c6b7ff 62%, #ffd0a1 82%, #ffd76e 100%);
  background-size: 260% 100%;
  animation: holo-slide 6s linear infinite;
}
.tile.is-holo .tile-variant {
  background: linear-gradient(100deg,
    #ffe9a3 0%, #ffcf5c 30%, #fff3cd 52%, #f0b429 76%, #ffe9a3 100%);
  background-size: 260% 100%;
}
@keyframes holo-slide {
  from { background-position: 0% 50%; }
  to   { background-position: 260% 50%; }
}

/* Le reflet : une bande claire en biais qui traverse l'illustration, puis
   attend. Seul `transform` est animé, donc le travail reste sur le
   compositeur et quarante vignettes ne coûtent rien. */
.shine {
  position: absolute; top: -60%; left: 0;
  width: 42%; height: 220%;
  background: linear-gradient(90deg,
    rgb(255 255 255 / 0) 0%,
    rgb(255 255 255 / .55) 45%,
    rgb(255 255 255 / .75) 50%,
    rgb(255 255 255 / .55) 55%,
    rgb(255 255 255 / 0) 100%);
  pointer-events: none;
  transform: translate3d(-170%, 0, 0) rotate(18deg);
  animation: shine-sweep 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes shine-sweep {
  0%, 58% { transform: translate3d(-170%, 0, 0) rotate(18deg); }
  100%    { transform: translate3d(320%, 0, 0) rotate(18deg); }
}

/* Les reflets sont décalés d'une vignette à l'autre : sans cela toute la
   grille scintille en même temps, ce qui fatigue l'œil. */
.tile:nth-child(4n+2) .shine { animation-delay: .9s; }
.tile:nth-child(4n+3) .shine { animation-delay: 1.8s; }
.tile:nth-child(4n)   .shine { animation-delay: 2.7s; }

/* Bordure irisée, visible même sans regarder l'étiquette. */
.tile.is-reverse,
.tile.is-holo {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #ffd76e, #ffb3c9, #b9e6ff, #c6b7ff, #ffd76e) border-box;
}
.tile.is-holo {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #ffe9a3, #f0b429, #fff3cd, #e0a32e) border-box;
}
.tile.is-reverse:hover,
.tile.is-holo:hover { box-shadow: var(--shadow-2), 0 0 22px rgb(255 190 120 / .5); }
/* L'anneau du panier prime sur le halo des versions brillantes. */
.tile.is-reverse.in-cart:hover,
.tile.is-holo.in-cart:hover {
  box-shadow: 0 0 0 3px var(--accent), 0 0 22px rgb(255 190 120 / .5);
}

.tile-body { padding: var(--s3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tile-name {
  margin: 0; font-size: 14.5px; font-weight: 650; line-height: 1.25;
  overflow-wrap: anywhere;
}
.tile-meta {
  margin: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  color: var(--muted); font-size: 12px;
}
.tile-sym { width: 15px; height: 15px; object-fit: contain; flex: none; }

.tile-buy {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); margin-top: auto; padding-top: 4px;
}
.tile-price-wrap { display: flex; flex-direction: column; line-height: 1.1; }
.tile-price { font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* « indicatif » sous chaque prix : le tarif n'est pas ferme, et le visiteur
   doit le savoir au moment où il regarde le montant, pas seulement en bas de
   page. */
.hint { font-size: 10.5px; color: var(--muted); letter-spacing: .01em; }
.tile-stock { font-size: 12px; color: var(--ok); font-weight: 600; }

/* Compteur de quantité : cible large, lisible, utilisable au doigt. */
.stepper {
  display: grid; grid-template-columns: 40px 1fr 40px;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.stepper.busy { opacity: .6; }
.step-btn {
  appearance: none; border: 0; background: var(--surface-2);
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
  min-height: 40px; padding: 0;
}
.step-btn:hover { background: var(--accent-soft); color: var(--accent); }
.step-btn:active { background: var(--accent); color: #fff; }
.step-val {
  appearance: none; -webkit-appearance: none;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font: inherit; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink); min-width: 0; padding: 0;
}
.step-val:focus { outline: none; background: var(--accent-soft); }

/* ------------------------------------------------------------- Extensions */

.setgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--s4);
}
.setcard {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s4);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-1);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.setcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-line); }
/* Boîte de taille imposée et image « contenue » : une hauteur en pourcentage
   ne contient pas l'image de façon fiable, et les logos hauts débordaient sur
   le texte de la carte. */
.setcard-logo {
  height: 88px; display: block; overflow: hidden;
  background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s3);
}
.setcard-logo img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
.setcard-logo img.sym-only { width: 52px; margin: 0 auto; display: block; }
.setcard-fallback { font-size: 26px; font-weight: 700; color: var(--muted); }
.setcard-body { display: flex; flex-direction: column; gap: 2px; }
.setcard-name { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 15.5px; }
.setcard-sym { width: 17px; height: 17px; object-fit: contain; flex: none; }
.setcard-meta { color: var(--ink-2); font-size: 13.5px; }
.setcard-date { color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------------------ Panier */

.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--s5); align-items: start; }

.cart-lines { display: flex; flex-direction: column; gap: var(--s3); }

.line {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: var(--s4); align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s3) var(--s4);
  box-shadow: var(--shadow-1);
}
.line-warn { border-color: var(--warn); background: var(--warn-bg); }
.line-img { line-height: 0; }
.line-img img { width: 64px; border-radius: var(--r-sm); display: block; }
.line-body h3 { margin: 0 0 2px; font-size: 15.5px; font-weight: 650; }
.line-meta { margin: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.chip {
  background: var(--gold); color: #24190a; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}
.line-alert { margin: 4px 0 0; color: var(--warn); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.line-qty { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.line-qty .stepper { width: 132px; }
.line-unit { font-size: 11.5px; color: var(--muted); }
.line-total { display: flex; align-items: center; gap: var(--s3); }
.line-total .mono { font-size: 16px; font-weight: 700; min-width: 74px; text-align: right; }
.line-del {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: var(--r-sm);
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
}
.line-del:hover { border-color: var(--err); color: var(--err); background: var(--err-bg); }

.cart-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }

.cart-side { display: flex; flex-direction: column; gap: var(--s3); position: sticky; top: calc(var(--head-h) + var(--s4)); }
.side-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s4); box-shadow: var(--shadow-1);
}
.side-row { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--s2); color: var(--ink-2); }
.side-row b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 650; }
.side-row.big { font-size: 17px; padding-top: var(--s2); border-top: 1px solid var(--line-soft); }
.side-row.big b { font-size: 24px; letter-spacing: -.02em; font-weight: 750; }
/* Le bouton était collé au total juste au-dessus. */
.side-box .btn.wide { margin-top: var(--s4); }
.side-help { font-size: 12.5px; color: var(--muted); margin: var(--s3) 0 0; }
.side-steps ol { margin: 0 0 var(--s3); padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.side-steps li { margin-bottom: 4px; }

.min-note {
  display: flex; align-items: flex-start; gap: var(--s2);
  background: var(--warn-bg); color: var(--warn);
  border-radius: var(--r-sm); padding: 10px 12px;
  font-size: 13.5px; margin: var(--s3) 0; line-height: 1.45;
}
.min-note .icon { margin-top: 2px; }
.min-note b { white-space: nowrap; }

.modal-warn {
  display: flex; align-items: flex-start; gap: var(--s2);
  background: var(--warn-bg); color: var(--warn);
  border-radius: var(--r-sm); padding: 10px 12px;
  font-size: 13.5px; margin: 0 0 var(--s3); line-height: 1.45; font-weight: 550;
}
.modal-warn .icon { margin-top: 2px; }

/* Bandeau du code déjà obtenu : il doit être la première chose qu'on voit en
   arrivant sur son panier, et rester lisible à voix haute. */
.code-banner {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px dashed var(--accent-line);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
}
.code-banner-ic { color: var(--accent); display: inline-flex; flex: none; }
.code-banner-body { flex: 0 1 auto; }
.code-banner-label {
  margin: 0; font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent);
}
.code-banner-value {
  margin: 2px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: .06em; color: var(--ink);
}
.code-banner-side { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.code-banner-side p { margin: 0; font-size: 12.5px; line-height: 1.45; }

.issued { margin-top: var(--s7); }
.issued h2 { display: flex; align-items: center; gap: 7px; }

/* ------------------------------------------------------------------ Boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; text-decoration: none;
  min-height: 44px; transition: filter .12s;
}
.btn:hover { filter: brightness(1.07); }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.btn.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); filter: none; }
.btn.small { padding: 8px 13px; font-size: 14px; min-height: 38px; }
.btn.wide { width: 100%; }
.btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; }
.badge.done { background: var(--ok-bg); color: var(--ok); }
.badge.pending { background: var(--warn-bg); color: var(--warn); }

/* ------------------------------------------------------------------ Tableaux */

.table-wrap {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px var(--s4); text-align: left; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
     font-weight: 650; background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Vide, aide */

.empty {
  text-align: center; padding: var(--s8) var(--s5);
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--r-lg); color: var(--ink-2);
}
/* Seule l'icône d'illustration, enfant direct : sans le `>`, la règle
   s'appliquait aussi aux icônes des boutons placés en dessous, qui se
   retrouvaient décalées vers le haut. */
.empty > .icon { color: var(--line); margin-bottom: var(--s3); }
.empty h2 { margin-bottom: var(--s2); }
.empty p { margin: 0 0 var(--s4); }
.empty .btn-row { justify-content: center; }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-top: var(--s6); }

/* --------------------------------------------------------------- Fenêtre */

.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: var(--s5);
  background: rgb(10 12 16 / .6); backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.modal-box {
  background: var(--surface); border-radius: var(--r-lg);
  padding: var(--s6); width: min(430px, 100%);
  box-shadow: var(--shadow-3); position: relative;
  max-height: 90vh; overflow-y: auto;
}
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--surface-2); color: var(--muted);
  cursor: pointer; display: grid; place-items: center;
}
.modal-close:hover { background: var(--bg-2); color: var(--ink); }
.modal-err {
  background: var(--err-bg); color: var(--err); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 14px; margin: 0 0 var(--s3); font-weight: 550;
}
/* --------------------------------------------- Confirmation du code

   Trois niveaux nettement séparés : le code (ce qu'on est venu chercher),
   l'action à mener, puis les précisions. Tout à plat, l'essentiel se perdait
   au milieu des paragraphes.
   ------------------------------------------------------------------------- */

.done-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.done-ic { color: var(--ok); display: inline-flex; flex: none; }
.done-head h2 { margin: 0; }

.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap;
  background: var(--accent-soft); border: 1px dashed var(--accent-line);
  border-radius: var(--r); padding: var(--s4); margin: 0 0 var(--s4);
}
.code-box span:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: .07em; color: var(--accent);
  line-height: 1.1;
}

/* L'action à mener : mise en avant, mais moins que le code. */
.done-step {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin: 0 0 var(--s4);
  font-size: 15px; line-height: 1.45; font-weight: 550;
}
.done-step .icon { color: var(--accent); margin-top: 2px; }

/* Les précisions : une liste courte, scannable, pas un pavé. */
.facts { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: 9px; }
.facts li {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-size: 13px; line-height: 1.4; color: var(--ink-2);
}
.facts .icon { color: var(--muted); margin-top: 2px; flex: none; }

/* ----------------------------------------------------------------- Messages */

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 550;
  box-shadow: var(--shadow-2); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 95; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err  { background: var(--err); }
.toast.warn { background: var(--warn); }
.toast.ok   { background: var(--ok); }

/* -------------------------------------------------------------- Pied, cookies */

.foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: var(--s8); }
.foot-in {
  max-width: 1240px; margin: 0 auto; padding: var(--s6) var(--s5);
  display: flex; gap: var(--s6); flex-wrap: wrap; justify-content: space-between;
}
.foot p { margin: 4px 0 0; font-size: 13.5px; max-width: 42ch; }
.foot-links { display: flex; flex-direction: column; gap: 6px; }
.foot-links a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.foot-links a:hover { color: var(--accent); }

/* Tant que le bandeau est visible, la place est réservée DANS le pied de page
   et non après lui : appliquée au corps, cette marge créait une bande vide
   sous le pied une fois la page déroulée jusqu'en bas. */
body:has(.cookie:not([hidden])) .foot { padding-bottom: 104px; }

.cookie {
  position: fixed; left: var(--s4); right: var(--s4); bottom: var(--s4); z-index: 80;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-2);
  max-width: 720px; margin: 0 auto;
}
.cookie[hidden] { display: none; }
.cookie-in { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); flex-wrap: wrap; }
.cookie-ic { color: var(--gold); display: inline-flex; }
.cookie p { margin: 0; flex: 1 1 260px; font-size: 13.5px; color: var(--ink-2); }

/* ------------------------------------------------------------------ Légales */

.legal h2 { margin-top: var(--s6); font-size: 17px; }
.legal p { color: var(--ink-2); }
.legal code {
  background: var(--bg-2); padding: 2px 6px; border-radius: 4px;
  font-size: 13.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------- Sélecteur (repris de l'admin) */

.cselect { position: relative; }
.cselect-native.is-hidden { display: none; }
.cselect-btn {
  display: flex; align-items: center; gap: var(--s2);
  min-width: 232px; min-height: 44px; padding: 8px 11px 8px 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px;
  cursor: pointer; text-align: left;
}
.cselect-btn:hover { border-color: var(--muted); }
.cselect-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cselect-value { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1; }
.cselect-arrow { color: var(--muted); flex: none; }
img.cselect-icon, span.cselect-icon { width: 22px; height: 22px; flex: none; object-fit: contain; }
.cselect-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-meta { color: var(--muted); font-size: 12.5px; flex: none; }
.cselect-pop {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0;
  min-width: 100%; width: max-content; max-width: min(420px, 92vw);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-2); padding: var(--s2);
}
.cselect-pop[hidden] { display: none; }
.cselect-filter { width: 100%; margin-bottom: var(--s2); }
.cselect-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.cselect-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; min-height: 44px;
}
.cselect-item:hover { background: var(--surface-2); }
.cselect-item[aria-selected="true"] { background: var(--accent-soft); }
.cselect-item[aria-selected="true"] .cselect-text { color: var(--accent); }
.cselect-item[hidden] { display: none; }

/* ------------------------------------------------------------------- Loupe */

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--s5);
  background: rgb(8 10 13 / .84); backdrop-filter: blur(3px);
}
.lightbox[hidden] { display: none; }
.lightbox-inner { display: flex; gap: var(--s5); align-items: center; max-width: 100%; max-height: 100%; }
.lightbox img { max-width: min(72vw, 520px); max-height: 86vh; border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.lightbox-info { color: #fff; max-width: 300px; min-width: 200px; }
.lightbox-info h3 { margin: 0 0 4px; font-size: 21px; color: #fff; }
.lightbox-info .sub { color: #b9c1ca; font-size: 13.5px; margin-bottom: var(--s4); }
.lightbox-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s4); font-size: 14px; }
.lightbox-info dt { color: #98a1ab; }
.lightbox-info dd { margin: 0; }
.lightbox-nav { margin-top: var(--s5); display: flex; gap: var(--s2); }
.lightbox-nav button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 13px; border-radius: var(--r-sm);
  border: 1px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .08);
  color: #fff; font: inherit; font-size: 13.5px; cursor: pointer;
}
.lightbox-nav button:hover { background: rgb(255 255 255 / .18); }
.lightbox-close {
  position: absolute; top: var(--s4); right: var(--s4);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .08);
  color: #fff; cursor: pointer; display: grid; place-items: center;
}
.lightbox-close:hover { background: rgb(255 255 255 / .2); }

/* ---------------------------------------------------------------- Étroit */

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-side { position: static; }
}
@media (max-width: 720px) {
  main { padding: var(--s5) var(--s4) var(--s7); }
  .shell-in { padding: 0 var(--s4); gap: var(--s3); }
  .shell-nav a span { display: none; }
  .shell-nav a { padding: 10px; }
  .cart-sum { display: none; }
  h1 { font-size: 24px; }
  .hero { padding: var(--s6) var(--s5); }
  .hero h1 { font-size: 26px; }

  /* Deux cartes par rangée plutôt qu'une : à 172 px de large minimum et
     24 px d'écart, il n'en tenait qu'une seule et chaque carte occupait tout
     l'écran. On resserre pour retrouver une grille. */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .tile-body { padding: var(--s2); gap: 4px; }
  .tile-name { font-size: 13px; }
  .tile-meta { font-size: 11px; }
  .tile-price { font-size: 15px; }
  .tile-stock { font-size: 11px; }
  .stepper { grid-template-columns: 34px 1fr 34px; }
  .step-btn { min-height: 38px; }

  .setgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .setcard { padding: var(--s3); gap: var(--s2); }
  .setcard-logo { height: 62px; padding: var(--s2); }
  .setcard-name { font-size: 13.5px; }
  .setcard-meta { font-size: 12px; }
  .setcard-date { font-size: 11.5px; }

  /* Ligne de panier : visuel et description en haut, réglages en bas. */
  .line {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "img  body  body"
      "qty  tot   tot";
    gap: var(--s3) var(--s3);
    padding: var(--s3);
  }
  .line-img { grid-area: img; }
  .line-body { grid-area: body; }
  .line-qty { grid-area: qty; align-items: flex-start; }
  .line-total { grid-area: tot; justify-content: flex-end; }
  .line-img img { width: 56px; }
  .line-body h3 { font-size: 14.5px; }
  .line-qty .stepper { width: 118px; }
  /* Une seule ligne : « 0,03 € l'unité · indicatif » passait sur trois. */
  .line-unit { font-size: 10.5px; white-space: nowrap; }
  .line-total .mono { font-size: 15px; min-width: 0; }

  .finder-main { gap: var(--s2); }
  .finder-main .fld.grow { flex: 1 1 100%; }
  .finder-main .cselect, .finder-main .cselect-btn { width: 100%; min-width: 0; }
  .finder-main .btn { width: 100%; }
  .finder-row .fld { flex: 1 1 44%; }
  .finder-row .control.small { max-width: none; width: 100%; }
  .result-bar { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .price-note { margin-top: 0; }

  .side-box { padding: var(--s3); }
  .code-banner { padding: var(--s3); gap: var(--s3); }
  .code-banner-value { font-size: 21px; }

  .foot-in { padding: var(--s5) var(--s4); gap: var(--s4); }

  @media (max-width: 400px) {
    .logo-text { display: none; }
    .shell-in { gap: var(--s2); padding: 0 var(--s3); }
    .shell-nav a { padding: 10px 8px; }
  }

  .lightbox { padding: var(--s3); }
  .lightbox-inner { flex-direction: column; gap: var(--s3); }
  .lightbox img { max-width: 82vw; max-height: 52vh; }
  .lightbox-info { max-width: 82vw; min-width: 0; }
  .modal-box { padding: var(--s5) var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .tile:hover, .setcard:hover { transform: none; }
  /* Ni reflet ni irisation animée : la bordure et l'étiquette suffisent. */
  .shine { display: none; }
}