/* ------------------------------------------------------------------ palette
   L'entrepôt la nuit : le sol reste sombre, les panneaux sont éclairés,
   l'orange de signalisation ne sert qu'à ce qui bouge et à ce qui presse.   */

:root {
  /* Le site est sombre de bout en bout : sans cette ligne le navigateur peint
     ses propres champs en clair et la saisie devient un rectangle blanc. */
  color-scheme: dark;
  --jx-fond:       #10151c;   /* le sol */
  --jx-fond-2:     #0a0e13;   /* bandeau, pied, bandes de nuit */
  --jx-bande-a:    #141b24;   /* bande relevée d'un demi-ton */
  --jx-panneau:    #18202b;   /* surface d'un talon, d'un panneau */
  --jx-panneau-2:  #212c3a;   /* entête de panneau, ligne de titre */
  --jx-creux:      #0c1117;   /* fond de casier, champ de saisie */

  --jx-trait:      #2a3543;
  --jx-trait-fort: #3d4c5e;

  --jx-mot:        #e8edf3;
  --jx-mot-doux:   #9fb0c2;
  --jx-mot-faible: #7b8b9c;

  --jx-signal:     #ff6a2b;
  --jx-signal-bas: #c8420d;
  --jx-ambre:      #ffc53d;
  --jx-encre:      #10151c;   /* ce qu'on écrit sur un aplat orange ou ambre */

  --jx-vert:       #b7d94a;
  --jx-bleu:       #6fb2f5;

  --jx-titre: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --jx-texte: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  --jx-large: 78rem;
  --jx-gouttiere: 1.25rem;
  --jx-coin: 16px;
  --jx-marge-rail: calc((100% - min(100%, var(--jx-large))) / 2 + var(--jx-gouttiere));
}

/* Aucune temporisation : sur un quai, un état change, il ne se fond pas.
   Ce qui bouge ici ne bouge que pour compter le temps ou faire défiler
   une rangée — jamais pour adoucir un clic. */
*, *::before, *::after { box-sizing: border-box; transition: none !important; }

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

/* Le sol : béton sombre, quadrillage de repérage, halo d'une lampe en hauteur
   au-dessus du premier écran. */
body {
  margin: 0;
  background-color: var(--jx-fond);
  background-image:
    radial-gradient(120% 62% at 50% 0%,
      rgba(255, 138, 64, .17) 0%, rgba(255, 138, 64, .055) 40%, rgba(255, 138, 64, 0) 72%),
    repeating-linear-gradient(0deg,  rgba(160, 178, 196, .052) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(160, 178, 196, .052) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg,  rgba(160, 178, 196, .028) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(160, 178, 196, .028) 0 1px, transparent 1px 8px);
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
  background-size: 100% 820px, auto, auto, auto, auto;
  background-position: top center, 0 0, 0 0, 0 0, 0 0;
  color: var(--jx-mot);
  font-family: var(--jx-texte);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6, .jx-chiffre {
  font-family: var(--jx-titre);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  padding-top: 0;
  text-transform: uppercase;
  color: var(--jx-mot);
}

h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

/* Le cadre importé cale ses blocs de texte sur sa propre grille : retrait haut
   de 6 px, interligne figé à 24 px et demi-ligne négative entre deux paragraphes
   voisins. Cela mangeait la troisième ligne des descriptions et faisait mordre
   le tampon d'état. Le rythme vertical est posé ici, on remet ces réglages à plat. */
p, dd, dt, cite, summary, small, label { padding-top: 0; }
p, dd, dt, cite, summary { line-height: inherit; }
p:not([hidden]) + p:not([hidden]) { margin-top: 0; }
small { margin-bottom: 0; }

/* Même chose côté saisie : le cadre étire chaque champ sur toute la largeur, lui
   impose un minimum de huit cadratins, une marge basse d'une ligne et sa propre
   pile de polices. Les formulaires d'ici sont courts et écrits dans la même
   typographie que le reste ; les largeurs utiles sont redonnées plus bas. */
textarea, select,
[type="text"], [type="search"], [type="number"], [type="email"], [type="tel"],
[type="url"], [type="password"] {
  width: auto; min-width: 0; margin-bottom: 0;
  font-family: var(--jx-texte); font-size: 0.95rem; line-height: 1.5;
  background-color: var(--jx-creux); color: var(--jx-mot);
}

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

a { color: var(--jx-ambre); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--jx-signal); }

:focus-visible { outline: 3px solid var(--jx-ambre); outline-offset: 2px; }

::selection { background: var(--jx-signal); color: var(--jx-encre); }

.jx-invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Réserve des filtres de teinte : hors flux, jamais affichée, seulement citée. */
.jx-filtres { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.jx-large { width: 100%; max-width: var(--jx-large); margin-inline: auto; padding-inline: var(--jx-gouttiere); }

/* ------------------------------------------------------- angle coupé, ruban

   La forme de la maison : un coin rabattu en haut à droite, comme un carton
   ouvert au cutter, et le fil orange qui suit la coupe.                      */

.jx-talon,
.jx-note-carte,
.jx-cadre,
.jx-vignette,
.jx-fiche__exp,
.jx-fiche__achat,
.jx-commande__resume,
.jx-estim,
.jx-avance,
.jx-erreurs,
.jx-consigne,
.jx-formulaire-type,
.jx-questions li,
.jx-bloc,
.jx-releve,
.jx-prime-talon,
.jx-prime-inaugural__photo,
.jx-compte-jour__case,
.jx-trajet__etape,
.jx-voix__bordereau,
.jx-rampe__vide {
  --coin: var(--jx-coin);
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
  background-image: linear-gradient(to bottom left,
      transparent 0 calc(var(--coin) / 1.4142 - 1px),
      var(--jx-signal) calc(var(--coin) / 1.4142 - 1px) calc(var(--coin) / 1.4142 + 0.6px),
      transparent calc(var(--coin) / 1.4142 + 0.6px));
  background-repeat: no-repeat;
  background-position: top right;
  background-size: calc(var(--coin) * 2.2) calc(var(--coin) * 2.2);
}

/* Hachures d'avertissement : elles marquent une limite, pas une décoration.
   On les pose en haut d'une bande et sous un titre de section. */
.jx-hachure,
.jx-bande::before {
  background-image: repeating-linear-gradient(135deg,
      var(--jx-signal) 0 9px, var(--jx-fond-2) 9px 18px);
}

/* ------------------------------------------------------------------ bandeau */

.jx-bandeau {
  position: sticky; top: 0; z-index: 40;
  background: var(--jx-fond-2);
  color: var(--jx-mot);
  border-bottom: 2px solid var(--jx-signal);
  box-shadow: 0 10px 24px -18px #000;
}

.jx-bandeau__rang {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 52px;
  width: 100%; max-width: var(--jx-large); margin-inline: auto;
  padding: 0.35rem var(--jx-gouttiere);
}

.jx-sigle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--jx-titre);
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; color: var(--jx-mot);
  white-space: nowrap; flex: 0 0 auto;
}
.jx-sigle b { color: var(--jx-signal); font-weight: 800; }
.jx-sigle .jx-picto { color: var(--jx-signal); }
.jx-sigle:hover, .jx-sigle:focus { color: var(--jx-ambre); }
.jx-sigle:hover .jx-picto, .jx-sigle:focus .jx-picto { color: var(--jx-ambre); }

.jx-bandeau__quai { background: var(--jx-panneau); border-top: 1px solid var(--jx-trait); }
.jx-quete {
  display: flex; align-items: stretch; min-width: 0;
  width: 100%; max-width: var(--jx-large); margin-inline: auto;
  padding: 0.45rem var(--jx-gouttiere);
}
.jx-quete__repere {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  background: var(--jx-creux); border: 1px solid var(--jx-trait-fort); border-right: none;
  color: var(--jx-signal);
}
.jx-quete__champ {
  flex: 1 1 auto; min-width: 0;
  height: 38px; padding: 0 0.7rem;
  background: var(--jx-creux);
  border: 1px solid var(--jx-trait-fort);
  color: var(--jx-mot);
  font-family: var(--jx-texte); font-size: 0.92rem;
}
.jx-quete__champ::placeholder { color: var(--jx-mot-faible); }
.jx-quete__bouton {
  flex: 0 0 auto; height: 38px; padding: 0 1.1rem;
  background: var(--jx-signal); color: var(--jx-encre);
  border: 1px solid var(--jx-signal);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  font-family: var(--jx-titre); font-size: 0.95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
}
.jx-quete__bouton:hover { background: var(--jx-ambre); border-color: var(--jx-ambre); }

.jx-panier-lien {
  flex: 0 0 auto; color: var(--jx-mot); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;
}
.jx-panier-lien b { color: var(--jx-ambre); }
.jx-panier-lien:hover, .jx-panier-lien:focus { color: var(--jx-ambre); }

/* Réglette de navigation : les rayons en vitrine dans la barre même, une ligne défilable. */
.jx-reglette { flex: 1 1 auto; min-width: 0; align-self: stretch; }
.jx-reglette__liste {
  display: flex; gap: 0; margin: 0; padding: 0;
  list-style: none; overflow-x: auto; scrollbar-width: thin;
  height: 100%; max-width: none;
}
.jx-reglette__liste a {
  display: flex; align-items: center; height: 100%; padding: 0 0.7rem;
  color: var(--jx-mot-doux); text-decoration: none; white-space: nowrap;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  border-bottom: 3px solid transparent;
}
.jx-reglette__liste a:hover { color: var(--jx-mot); background: var(--jx-panneau-2); }
.jx-reglette__liste a[aria-current="page"] {
  color: var(--jx-mot); border-bottom-color: var(--jx-signal); background: var(--jx-panneau-2);
}

/* ------------------------------------------------------------------ message */

/* Toast d'action (ajout au panier…) : carte sobre en bas à droite, ne pousse
   pas la page, se referme seule par animation CSS — même sans script — et à la
   croix. Remplace l'ancien bandeau ambre pleine largeur. */
.jx-toaster {
  position: fixed;
  right: clamp(0.6rem, 3vw, 1.4rem);
  bottom: clamp(0.6rem, 3vw, 1.4rem);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(22rem, calc(100vw - 1.2rem));
  pointer-events: none;
}
.jx-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem 0.7rem 0.9rem;
  background: var(--jx-creux);
  color: var(--jx-mot);
  border: 1px solid var(--jx-trait-fort);
  border-left: 4px solid var(--jx-signal);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
  font-weight: 600;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  animation: jx-toast-in 0.28s ease-out, jx-toast-out 0.5s ease-in 4.2s forwards;
}
.jx-toast__ico { display: inline-flex; color: var(--jx-signal); }
.jx-toast__ico .jx-picto { width: 1.3em; height: 1.3em; }
.jx-toast__txt { flex: 1 1 auto; min-width: 0; }
.jx-toast__x {
  flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  padding: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--jx-mot-doux);
  font-size: 1.25rem; line-height: 1;
}
.jx-toast__x:hover { color: var(--jx-signal); }
.jx-toast--parti { animation: jx-toast-out 0.35s ease-in forwards; }
@keyframes jx-toast-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jx-toast-out {
  to { opacity: 0; transform: translateY(0.4rem); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .jx-toast { animation: jx-toast-out 0.3s ease 4.2s forwards; }
}

/* -------------------------------------------------------------- fil d'Ariane */

.jx-fil { font-size: 0.8rem; color: var(--jx-mot-doux); padding: 0.9rem 0 0; }
.jx-fil a { color: var(--jx-mot-doux); }
.jx-fil a:hover { color: var(--jx-signal); }
.jx-fil span { padding: 0 0.35rem; color: var(--jx-trait-fort); }

/* -------------------------------------------------- pictogrammes d'entrepôt */

.jx-picto { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; }
.jx-picto--gros { width: 2.5rem; height: 2.5rem; vertical-align: 0; color: var(--jx-signal); }
.jx-picto--moyen { width: 1.7rem; height: 1.7rem; vertical-align: 0; }

/* ------------------------------------------------------------ premier écran */

.jx-tableau {
  position: relative; background: var(--jx-fond-2); color: var(--jx-mot);
  overflow: hidden; border-bottom: 6px solid transparent;
  border-image: repeating-linear-gradient(135deg,
      var(--jx-signal) 0 9px, var(--jx-fond-2) 9px 18px) 6;
}
.jx-tableau__fond { position: absolute; inset: 0; }
.jx-tableau__fond img { width: 100%; height: 100%; object-fit: cover; filter: url(#jx-duoton); }
.jx-tableau__voile {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 52% at 24% -8%, rgba(255, 166, 74, .34) 0%, rgba(255, 166, 74, 0) 66%),
    linear-gradient(90deg, rgba(10, 14, 19, .95) 0%, rgba(10, 14, 19, .82) 46%, rgba(10, 14, 19, .46) 100%),
    linear-gradient(180deg, rgba(10, 14, 19, .70) 0%, rgba(10, 14, 19, .34) 40%, rgba(10, 14, 19, .92) 100%);
}
.jx-tableau__corps {
  position: relative;
  width: 100%; max-width: var(--jx-large); margin-inline: auto;
  padding: 2rem var(--jx-gouttiere) 1.6rem;
}

.jx-tableau__ligne1 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.2rem;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jx-mot-doux); border-bottom: 1px solid var(--jx-trait-fort); padding-bottom: 0.7rem;
}
.jx-tableau__ligne1 strong { color: var(--jx-ambre); font-weight: 700; letter-spacing: 0.14em; }

.jx-tableau__phrase {
  max-width: 20ch; color: var(--jx-mot); margin: 1.3rem 0 0.5rem;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.16;
}
.jx-tableau__mot { max-width: 56ch; color: var(--jx-mot-doux); font-size: 1rem; margin: 0; }

/* Les quatre promesses sous l'accroche : un signe, un mot fort, une précision. */
.jx-tableau__atouts {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--jx-trait-fort);
  border: 1px solid var(--jx-trait-fort);
}
.jx-atout {
  background: rgba(10, 14, 19, .88); padding: 0.8rem 0.9rem 0.9rem;
  display: grid; gap: 0.15rem; min-width: 0;
}
.jx-atout__signe { color: var(--jx-signal); }
.jx-atout__titre {
  font-family: var(--jx-titre); font-weight: 800; font-size: 1.32rem; line-height: 1.16;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--jx-mot);
}
.jx-atout__mot { font-size: 0.82rem; color: var(--jx-mot-doux); }

.jx-tableau__boutons { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 0; }
.jx-tableau__boutons .jx-bouton { font-size: 1.02rem; padding: 0.5rem 1.2rem; }

.jx-tableau__minute {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem;
  margin: 1.1rem 0 0; max-width: 46rem;
  font-size: 0.84rem; color: var(--jx-mot-doux);
}
.jx-tableau__minute .jx-picto { color: var(--jx-signal); }
.jx-tableau__minute b {
  color: var(--jx-ambre); font-variant-numeric: tabular-nums;
  font-weight: 700; letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ sections */

.jx-bande { position: relative; padding: 3rem 0; }
.jx-bande::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px;
  opacity: .5; pointer-events: none;
}
.jx-bande--claire { background: var(--jx-bande-a); }
.jx-bande--sombre { background: var(--jx-fond-2); }
.jx-bande--sombre h2, .jx-bande--sombre h3 { color: var(--jx-mot); }

.jx-tete-bande {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 0.6rem 1.5rem; margin-bottom: 1.4rem;
  border-bottom: 3px solid var(--jx-signal); padding-bottom: 0.6rem;
}
.jx-tete-bande h2 { margin: 0; }
.jx-suite { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.jx-suite a { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Deux ou trois phrases sous le titre d'une bande : elles disent ce qu'on
   trouve dans la rangée qui suit, puis laissent la place à la marchandise. */
.jx-intro-bande { max-width: 74ch; margin: 0 0 1.4rem; color: var(--jx-mot-doux); font-size: 0.96rem; }

/* Bloc photo + texte : la photo porte la section, le texte s'y adosse. */
.jx-diptyque { display: grid; gap: 1.6rem; align-items: center; }
.jx-diptyque > * { min-width: 0; }
.jx-diptyque__photo {
  position: relative;
  --coin: 22px;
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.jx-diptyque__photo img { width: 100%; filter: url(#jx-duoton); }
.jx-diptyque__legende {
  position: absolute; left: 0; bottom: 0;
  background: var(--jx-signal); color: var(--jx-encre);
  font-family: var(--jx-titre); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 1.1rem 0.35rem 0.7rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

/* ------------------------------------------------- talon d'expédition (carte) */

.jx-grille { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.jx-grille--5 { grid-template-columns: 1fr; }
.jx-grille > * { min-width: 0; }

.jx-talon {
  display: flex; flex-direction: column;
  background-color: var(--jx-panneau);
  border: 1px solid var(--jx-trait);
  border-top: 3px solid var(--jx-trait-fort);
  position: relative;
  min-width: 0;
}
.jx-talon:hover { border-color: var(--jx-trait-fort); border-top-color: var(--jx-signal); }
/* Le coin rabattu mord le haut à droite : l'étiquette s'arrête avant la coupe. */
.jx-talon__entete {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  padding: 0.4rem 1.15rem 0.4rem 0.55rem;
  background: var(--jx-panneau-2);
  border-bottom: 1px solid var(--jx-trait);
  font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--jx-mot-doux);
}
.jx-talon__ref { font-variant-numeric: tabular-nums; }

/* Étiquette de délai : une pastille pointue, posée en haut à droite de la fiche. */
.jx-etiquette {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-family: var(--jx-titre); font-weight: 800;
  font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.1rem 0.75rem 0.1rem 0.4rem;
  border: 1px solid currentColor;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  white-space: nowrap;
}
.jx-etiquette--vif   { color: var(--jx-vert); }
.jx-etiquette--calme { color: var(--jx-bleu); }
.jx-etiquette--gris  { color: var(--jx-mot-doux); }
/* Ce qui part aujourd'hui se rappelle au regard toutes les quatre secondes. */
.jx-etiquette--vif { animation: jx-clignote 4s linear infinite; }

/* Le visuel est posé entier sur le talon : une jaquette verticale garde ses bords,
   un cliché large garde son ciel. Rien n'est recadré pour entrer dans la case.
   La lumière du quai passe dessus : chaud en haut, nuit en bas. */
.jx-talon__photo {
  position: relative; isolation: isolate;
  background-color: var(--jx-creux);
  border-bottom: 1px solid var(--jx-trait);
}
.jx-talon__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; min-height: 0;
  filter: saturate(.8) contrast(1.06) brightness(.98);
}
.jx-talon__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(163deg,
    rgba(255, 106, 43, .22) 0%, rgba(255, 106, 43, .05) 34%,
    rgba(16, 21, 28, 0) 56%, rgba(10, 14, 19, .55) 100%);
}
.jx-talon:hover .jx-talon__photo::after { background: linear-gradient(163deg, rgba(255, 106, 43, .10) 0%, rgba(10, 14, 19, .28) 100%); }
.jx-talon__remise {
  position: absolute; top: 0.4rem; left: 0.4rem; z-index: 2;
  background: var(--jx-signal); color: var(--jx-encre);
  font-family: var(--jx-titre); font-weight: 800; font-size: 0.85rem;
  padding: 0.05rem 0.6rem 0.05rem 0.35rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
}

.jx-talon__corps { padding: 0.6rem 0.55rem 0.7rem; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.jx-talon__nom {
  font-family: var(--jx-titre); font-size: 1.12rem; line-height: 1.16;
  text-transform: uppercase; margin: 0 0 0.25rem; color: var(--jx-mot);
}
.jx-talon__nom a { text-decoration: none; color: var(--jx-mot); }
.jx-talon__nom a:hover { text-decoration: underline; color: var(--jx-ambre); }

.jx-talon__meta { font-size: 0.72rem; color: var(--jx-mot-faible); margin-bottom: 0.4rem; }

/* Coupe franche : trois lignes pleines, puis le texte s'arrête net. Pas de points
   de suspension greffés — la hauteur seule fait le travail. */
.jx-talon__mot {
  font-size: 0.82rem; line-height: 1.5; color: var(--jx-mot-doux);
  margin: 0 0 0.65rem;
  max-height: 4.5em;    /* trois lignes pleines, jamais le haut d'une quatrième */
  overflow: hidden;
}

.jx-tampon {
  display: inline-block; align-self: flex-start; width: fit-content;
  font-family: var(--jx-titre); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
  border: 2px solid currentColor;
  padding: 0.05rem 0.35rem; margin: 0 0 0.55rem;
  transform: rotate(-4deg); transform-origin: left center; opacity: 0.92;
}
.jx-tampon--comme-neuf    { color: var(--jx-vert); }
.jx-tampon--tres-bon-etat { color: var(--jx-bleu); }
.jx-tampon--correct       { color: var(--jx-mot-doux); }

.jx-talon__pied {
  margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--jx-trait);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
}
.jx-prix { font-family: var(--jx-titre); font-size: 1.45rem; font-weight: 800; line-height: 1.16; color: var(--jx-ambre); }
.jx-prix small { display: block; font-family: var(--jx-texte); font-size: 0.7rem; font-weight: 500;
                 color: var(--jx-mot-faible); text-decoration: line-through; letter-spacing: 0; }

/* -------------------------------------------------------------------- boutons */

.jx-bouton {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--jx-signal);
  background: var(--jx-signal); color: var(--jx-encre);
  font-family: var(--jx-titre); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  text-decoration: none; cursor: pointer; line-height: 1.3;
}
.jx-bouton:hover, .jx-bouton:focus { background: var(--jx-ambre); border-color: var(--jx-ambre); color: var(--jx-encre); }
.jx-bouton--signal { background: var(--jx-ambre); border-color: var(--jx-ambre); }
.jx-bouton--signal:hover { background: var(--jx-signal); border-color: var(--jx-signal); }
.jx-bouton--creux { background: transparent; color: var(--jx-ambre); border-color: var(--jx-trait-fort); }
.jx-bouton--creux:hover { background: var(--jx-ambre); border-color: var(--jx-ambre); color: var(--jx-encre); }
.jx-bouton--large { display: flex; justify-content: center; width: 100%; text-align: center; padding: 0.55rem 1rem; font-size: 1.05rem; }
.jx-bouton[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ------------------------------------------------------------------ formulaire */

.jx-champ { display: block; width: 100%; max-width: 100%; margin-bottom: 0.9rem; }
.jx-champ > span { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: 0.06em; color: var(--jx-mot-doux); margin-bottom: 0.2rem; }
.jx-champ input, .jx-champ select, .jx-champ textarea {
  width: 100%; padding: 0.45rem 0.6rem; font-family: var(--jx-texte); font-size: 0.95rem;
  border: 1px solid var(--jx-trait-fort); background: var(--jx-creux);
  color: var(--jx-mot);
}
.jx-champ input::placeholder, .jx-champ textarea::placeholder { color: var(--jx-mot-faible); }
.jx-quantite { width: 3.6rem; padding: 0.2rem 0.3rem; text-align: center;
               border: 1px solid var(--jx-trait-fort); background: var(--jx-creux); color: var(--jx-mot);
               font-family: var(--jx-texte); }
.jx-champ .jx-quantite { width: 5.5rem; padding: 0.45rem 0.6rem; }

/* --------------------------------------------------------------------- tables */

.jx-defile { overflow-x: auto; min-width: 0; }
/* Le cadre Vanilla impose table-layout:fixed à toutes les tables : six colonnes
   d'égale largeur, le nom de la pièce coupé en trois lignes et du vide partout
   ailleurs. Nos tables reprennent la répartition automatique. */
.jx-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; table-layout: auto; }
.jx-table th, .jx-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--jx-trait); vertical-align: top; }
.jx-table th { font-family: var(--jx-titre); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; color: var(--jx-mot); }

/* ---------------------------------------------------------------------- pied */

.jx-pied {
  background: var(--jx-fond-2); color: var(--jx-mot-doux); padding: 2.5rem 0 1.4rem; font-size: 0.88rem;
  border-top: 6px solid transparent;
  border-image: repeating-linear-gradient(135deg,
      var(--jx-signal) 0 9px, var(--jx-fond-2) 9px 18px) 6;
}
.jx-pied h3 { color: var(--jx-mot); font-size: 1.05rem; margin-bottom: 0.6rem;
              display: flex; align-items: center; gap: 0.4rem; }
.jx-pied h3 .jx-picto { color: var(--jx-signal); }
.jx-pied a { color: var(--jx-mot-doux); }
.jx-pied a:hover { color: var(--jx-ambre); }
.jx-pied__colonnes { display: grid; gap: 1.6rem; }
.jx-pied__colonnes > * { min-width: 0; }
.jx-pied__liste { list-style: none; margin: 0; padding: 0; }
.jx-pied__liste li { margin-bottom: 0.3rem; }
.jx-pied__bas {
  margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--jx-trait);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.8rem; color: var(--jx-mot-faible);
}
.jx-reglement { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.jx-reglement img { height: 26px; width: auto; background: #e8edf3; padding: 3px 6px; }
.jx-reglement--pied { margin-top: 1.6rem; font-size: 0.8rem; color: var(--jx-mot-faible); }
.jx-reglement--pied .jx-picto { color: var(--jx-signal); }

/* ------------------------------------------------------- sortie du catalogue */

.jx-sortie { padding: 1.4rem 0 3rem; }
.jx-sortie__tete h1 { margin-bottom: 0.2rem; }
.jx-compte { font-size: 0.92rem; color: var(--jx-mot-doux); margin: 0 0 0.4rem; }
.jx-compte strong { font-family: var(--jx-titre); font-size: 1.3rem; color: var(--jx-ambre); vertical-align: -0.05em; }
.jx-sortie__mot { max-width: 68ch; color: var(--jx-mot-doux); margin-bottom: 0.6rem; }

.jx-barre {
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.2rem; align-items: center; justify-content: space-between;
  border-block: 1px solid var(--jx-trait); padding: 0.7rem 0; margin-bottom: 1.2rem;
}
.jx-barre__puces { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.jx-puce {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--jx-trait-fort);
  padding: 0.2rem 0.8rem 0.2rem 0.55rem; background: var(--jx-panneau);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  font-size: 0.82rem; font-weight: 600; text-decoration: none; color: var(--jx-mot);
}
.jx-puce b { font-family: var(--jx-titre); font-size: 0.95rem; }
.jx-puce:hover, .jx-puce:focus { border-color: var(--jx-signal); background: var(--jx-panneau-2); color: var(--jx-mot); }
.jx-puce--on { background: var(--jx-signal); border-color: var(--jx-signal); color: var(--jx-encre); }
.jx-puce--on:hover, .jx-puce--on:focus { background: var(--jx-ambre); border-color: var(--jx-ambre); color: var(--jx-encre); }
.jx-puce--vif b   { color: var(--jx-vert); }
.jx-puce--calme b { color: var(--jx-bleu); }
.jx-puce--gris b  { color: var(--jx-mot-doux); }
.jx-puce--on b    { color: var(--jx-encre); }
.jx-puce--on .jx-picto { color: var(--jx-encre); }
.jx-puce .jx-picto { color: var(--jx-signal); }

.jx-cp { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0; }
.jx-cp label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--jx-mot-doux);
               display: inline-flex; align-items: center; gap: 0.3rem; }
.jx-cp label .jx-picto { color: var(--jx-signal); }
.jx-cp input {
  width: 6.5rem; padding: 0.25rem 0.5rem; font-family: var(--jx-texte); font-size: 0.9rem;
  border: 1px solid var(--jx-trait-fort); background: var(--jx-creux); color: var(--jx-mot);
}
.jx-cp input::placeholder { color: var(--jx-mot-faible); }


.jx-cp select {
  padding: 0.25rem 0.5rem; font-family: var(--jx-texte); font-size: 0.9rem;
  border: 1px solid var(--jx-trait-fort); background: var(--jx-creux);
  color: var(--jx-mot); max-width: 100%;
}
.jx-cp--large { width: 100%; row-gap: 0.5rem; }
.jx-cp--pile { display: grid; gap: 0.35rem; justify-items: start; }
.jx-cp--pile input { width: 100%; }

.jx-estim {
  background-color: var(--jx-panneau); border-left: 4px solid var(--jx-signal);
  padding: 0.7rem 0.9rem; font-size: 0.9rem; margin: 0 0 1.2rem; color: var(--jx-mot);
}
.jx-vide { font-size: 1.05rem; color: var(--jx-mot-doux); max-width: 60ch; }

/* --------------------------------------------------------- voix et lecture */

.jx-chapo { font-size: 1.1rem; color: var(--jx-mot-doux); max-width: 64ch; }
.jx-lecture { max-width: 62rem; }
.jx-lecture h2 { margin-top: 1.8rem; }
.jx-lecture p, .jx-lecture li { max-width: 72ch; }
/* Les panneaux signés ne sont pas du texte courant : ils prennent la colonne entière. */
.jx-lecture .jx-jalon,
.jx-lecture .jx-port,
.jx-lecture .jx-moyen,
.jx-lecture .jx-coord__ligne { max-width: none; }
.jx-lecture code { background: var(--jx-creux); padding: 0.05rem 0.3rem; color: var(--jx-ambre); }

/* ------------------------------------------------- titre marqué au pochoir

   Le signe posé devant le titre dit de quoi parle le paragraphe : un carton,
   une balance, une prise. Il est tracé au trait, dans une case coupée en
   biais comme les caisses du quai.                                          */

.jx-titre-quai {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 2.2rem; margin-bottom: 0.55rem;
}
.jx-titre-quai > span { min-width: 0; }
.jx-titre-quai__signe {
  --coin: 9px;
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem;
  background-color: var(--jx-panneau-2); color: var(--jx-signal);
  border: 1px solid var(--jx-trait-fort);
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.jx-titre-quai + p { margin-top: 0; }
.jx-bande--claire .jx-titre-quai__signe { background-color: var(--jx-panneau); }

/* ---------------------------------------------------- créneaux en panneaux

   Les trois créneaux ne sont pas trois lignes de tableau : ce sont trois
   panneaux d'aiguillage, chacun sous son signe et sa couleur de créneau.    */

.jx-jalons {
  list-style: none; margin: 0.4rem 0 1.4rem; padding: 0;
  display: grid; gap: 1px; background-color: var(--jx-trait-fort);
  border: 1px solid var(--jx-trait-fort);
}
.jx-jalons > * { min-width: 0; }
.jx-jalon {
  background-color: var(--jx-panneau); padding: 1rem 1.05rem 1.1rem;
  display: grid; gap: 0.3rem; max-width: none;
  border-top: 3px solid var(--jx-trait-fort);
}
.jx-jalon--vif   { border-top-color: var(--jx-vert); }
.jx-jalon--calme { border-top-color: var(--jx-bleu); }
.jx-jalon--gris  { border-top-color: var(--jx-mot-faible); }
.jx-jalon__signe { color: var(--jx-signal); }
.jx-jalon--vif   .jx-jalon__signe { color: var(--jx-vert); }
.jx-jalon--calme .jx-jalon__signe { color: var(--jx-bleu); }
.jx-jalon--gris  .jx-jalon__signe { color: var(--jx-mot-doux); }
.jx-jalon__titre {
  font-family: var(--jx-titre); font-weight: 800; font-size: 1.5rem; line-height: 1.16;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--jx-mot);
}
.jx-jalon__mot { font-size: 0.88rem; color: var(--jx-mot-doux); }

/* -------------------------------------------------------- étiquettes de port

   Un tarif se lit comme une étiquette collée sur le carton : le signe du mode
   de remise, le libellé, la somme en gros, la précision dessous.            */

.jx-ports { list-style: none; margin: 0.4rem 0 1.4rem; padding: 0; display: grid; gap: 0.6rem; }
.jx-ports > * { min-width: 0; }
.jx-port {
  --coin: 12px;
  display: grid; gap: 0.15rem 0.85rem; align-items: baseline; max-width: none;
  grid-template-columns: 2rem 1fr auto;
  background-color: var(--jx-panneau); border: 1px solid var(--jx-trait);
  padding: 0.7rem 0.9rem;
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.jx-port > * { min-width: 0; }
.jx-port__signe { grid-column: 1; grid-row: 1 / span 2; color: var(--jx-signal); align-self: center; }
.jx-port__nom {
  grid-column: 2; font-family: var(--jx-titre); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--jx-mot); line-height: 1.16;
}
.jx-port__somme {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  font-family: var(--jx-titre); font-weight: 800; font-size: 1.5rem; line-height: 1;
  color: var(--jx-ambre); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jx-port__mot { grid-column: 2; font-size: 0.82rem; color: var(--jx-mot-doux); }

/* ------------------------------------------------------ moyens de règlement */

.jx-moyens { list-style: none; margin: 0.4rem 0 1.4rem; padding: 0; display: grid; gap: 0.6rem; }
.jx-moyens > * { min-width: 0; }
.jx-moyen {
  display: flex; gap: 0.85rem; align-items: flex-start; max-width: none;
  background-color: var(--jx-panneau); border-left: 3px solid var(--jx-signal);
  padding: 0.75rem 0.9rem;
}
.jx-moyen > * { min-width: 0; }
.jx-moyen__signe { color: var(--jx-signal); flex: 0 0 auto; }
.jx-moyen__nom {
  display: block; font-family: var(--jx-titre); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--jx-mot); line-height: 1.16;
}
.jx-moyen__mot { display: block; font-size: 0.87rem; color: var(--jx-mot-doux); }

/* ------------------------------------------------------------- coordonnées */

.jx-coord {
  list-style: none; margin: 0.4rem 0 1.4rem; padding: 0;
  display: grid; gap: 1px; background-color: var(--jx-trait);
  border: 1px solid var(--jx-trait);
}
.jx-coord > * { min-width: 0; }
.jx-coord__ligne {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.1rem 0.85rem;
  background-color: var(--jx-panneau); padding: 0.7rem 0.9rem; max-width: none;
}
.jx-coord__ligne > * { min-width: 0; }
.jx-coord__signe { grid-row: 1 / span 2; align-self: center; color: var(--jx-signal); }
.jx-coord__quoi {
  font-family: var(--jx-titre); text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 0.8rem; color: var(--jx-mot-faible);
}
.jx-coord__quoi-val { font-size: 0.98rem; color: var(--jx-mot); overflow-wrap: anywhere; }

/* --------------------------------------------- signes posés dans un tableau

   Dans une colonne de tableau, le signe reste petit et suit la ligne de texte :
   il aide à retrouver la ligne, il ne la remplace pas.                       */

.jx-zone-code, .jx-marque-etat, .jx-critere {
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.jx-zone-code { color: var(--jx-ambre); }
.jx-zone-code .jx-picto { color: var(--jx-signal); }
.jx-critere .jx-picto { color: var(--jx-signal); }
.jx-marque-etat--comme-neuf .jx-picto    { color: var(--jx-vert); }
.jx-marque-etat--tres-bon-etat .jx-picto { color: var(--jx-bleu); }
.jx-marque-etat--correct .jx-picto       { color: var(--jx-mot-doux); }

.jx-pied__liste--signee a { display: inline-flex; align-items: center; gap: 0.45rem; }
.jx-pied__liste--signee .jx-picto { color: var(--jx-signal); }
.jx-pied__liste--signee a:hover .jx-picto { color: var(--jx-ambre); }

.jx-figure { margin: 1.6rem 0; }
.jx-figure img {
  width: 100%; filter: url(#jx-duoton);
  --coin: 20px;
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.jx-figure figcaption {
  font-size: 0.8rem; color: var(--jx-mot-doux); padding: 0.4rem 0 0 0.55rem;
  border-left: 3px solid var(--jx-signal); margin-top: 0.45rem;
}

.jx-formulaire-type {
  margin: 1rem 0; padding: 1rem 1.1rem; background-color: var(--jx-panneau);
  border: 1px solid var(--jx-trait-fort); font-size: 0.92rem;
}
.jx-forme-contact { max-width: 34rem; }

/* --------------------------------------------------------- cartes du journal */

.jx-notes { display: grid; gap: 1.2rem; }
.jx-notes > * { min-width: 0; }
.jx-note-carte { background-color: var(--jx-panneau); border: 1px solid var(--jx-trait); min-width: 0; }
.jx-note-carte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; min-height: 0; filter: url(#jx-duoton); }
.jx-note-carte__corps { padding: 0.7rem 0.8rem 0.9rem; }
.jx-note-carte__date { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--jx-mot-doux); margin: 0 0 0.25rem; }
.jx-note-carte h2, .jx-note-carte h3 { font-size: 1.25rem; margin: 0 0 0.35rem; }
.jx-note-carte h2 a, .jx-note-carte h3 a { text-decoration: none; color: var(--jx-mot); }
.jx-note-carte h2 a:hover, .jx-note-carte h3 a:hover { text-decoration: underline; color: var(--jx-ambre); }
.jx-note-carte__mot { font-size: 0.88rem; color: var(--jx-mot-doux); margin: 0; }

/* Ligne de classement d'une note : rubrique du journal, date, durée de lecture.
   La rubrique est marquée comme une case cochée sur un bordereau de tri. */
.jx-classement {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--jx-mot-faible); margin: 0 0 0.35rem;
}
.jx-classement__rubrique {
  font-family: var(--jx-titre); font-weight: 800; font-size: 0.76rem;
  letter-spacing: 0.07em; color: var(--jx-signal);
  border-left: 3px solid var(--jx-signal); padding-left: 0.4rem;
}
.jx-classement__sep { color: var(--jx-trait-fort); }
.jx-classement--tete { font-size: 0.78rem; margin-bottom: 0.6rem; }

/* --------------------------------------------------------------- fiche pièce */

.jx-fiche { display: grid; gap: 1.6rem; align-items: start; }
.jx-fiche__exp, .jx-fiche__achat, .jx-fiche__photo { min-width: 0; }

/* Sur un écran étroit la pièce se présente d'abord : nom, photo, prix, puis le
   détail de l'expédition. Les trois colonnes reviennent dès qu'il y a la place. */
.jx-fiche__photo { order: 1; }
.jx-fiche__achat { order: 2; }
.jx-fiche__exp   { order: 3; }

.jx-fiche__exp { background-color: var(--jx-panneau); border: 1px solid var(--jx-trait); border-top: 3px solid var(--jx-trait-fort); padding: 0.9rem; }
.jx-etiquette--bloc { display: inline-flex; font-size: 0.95rem; padding: 0.2rem 0.95rem 0.2rem 0.55rem; margin: 0 0 0.5rem; }
.jx-fiche__exp-mot { font-size: 0.88rem; color: var(--jx-mot-doux); }
.jx-fiche__avert { font-size: 0.76rem; color: var(--jx-mot-faible); margin: 0.6rem 0 0; }

.jx-releve { margin: 0.8rem 0; font-size: 0.88rem; }
.jx-releve dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jx-mot-doux); }
.jx-releve dd { margin: 0 0 0.55rem; font-weight: 600; }

/* Le total se lit comme le bas d'une facture : libellé à gauche, somme à droite,
   alignée sur la même colonne d'une ligne à l'autre. */
.jx-releve--total {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 1.2rem;
  border-top: 2px solid var(--jx-signal); padding-top: 0.6rem;
}
.jx-releve--total dt { align-self: center; }
.jx-releve--total dd { font-size: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--jx-ambre); }

.jx-fiche__sous { font-size: 0.85rem; color: var(--jx-mot-doux); letter-spacing: 0.06em; }

/* Surface calme : le visuel tient entier dedans, quelle que soit sa forme.
   La lampe du quai passe dessus ; au survol elle s'efface, pour que l'acheteur
   voie la pièce telle qu'elle est. */
.jx-cadre { margin: 0; position: relative; isolation: isolate;
            background-color: var(--jx-creux); border: 1px solid var(--jx-trait); padding: 0.6rem; }
.jx-cadre::after {
  content: ""; position: absolute; inset: 0.6rem; pointer-events: none; z-index: 1;
  background: linear-gradient(163deg,
    rgba(255, 106, 43, .17) 0%, rgba(255, 106, 43, .04) 36%,
    rgba(16, 21, 28, 0) 58%, rgba(10, 14, 19, .40) 100%);
}
.jx-cadre:hover::after, .jx-cadre:focus-within::after { background: none; }
.jx-fiche__grande { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; min-height: 0;
                    filter: saturate(.82) contrast(1.05); }

.jx-fiche__vignettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.jx-fiche__vignettes > * { min-width: 0; }
.jx-vignette { --coin: 10px; display: block; background-color: var(--jx-creux); border: 1px solid var(--jx-trait); padding: 0.25rem; }
.jx-vignette img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; min-height: 0; filter: saturate(.82); }
.jx-vignette:hover, .jx-vignette:focus-visible { border-color: var(--jx-signal); }
.jx-vignette--on { border-color: var(--jx-signal); border-width: 2px; padding: calc(0.25rem - 1px); }

.jx-fiche__achat { background-color: var(--jx-panneau); border: 1px solid var(--jx-trait); border-top: 3px solid var(--jx-signal); padding: 0.9rem; }
.jx-prix--grand { font-size: 2.3rem; margin: 0 0 0.15rem; }
.jx-fiche__tva { font-size: 0.74rem; color: var(--jx-mot-faible); margin-bottom: 0.7rem; }
.jx-tampon--grand { font-size: 0.9rem; padding: 0.15rem 0.5rem; }
.jx-fiche__etat-mot { font-size: 0.85rem; color: var(--jx-mot-doux); }
.jx-fiche__points { list-style: none; margin: 1rem 0 0; padding: 0.8rem 0 0; border-top: 1px solid var(--jx-trait); font-size: 0.83rem; color: var(--jx-mot-doux); }
.jx-fiche__points li { padding-left: 0.9rem; position: relative; margin-bottom: 0.3rem; }
.jx-fiche__points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--jx-signal); }

/* Sur la fiche, chaque promesse porte son signe : port, relais, coffre, sceau,
   retour. Le carré orange laisse la place au dessin. */
.jx-fiche__points--signes li { padding-left: 0; display: flex; align-items: flex-start; gap: 0.5rem; }
.jx-fiche__points--signes li::before { content: none; }
.jx-fiche__points--signes .jx-picto { color: var(--jx-signal); margin-top: 0.1em; }

.jx-releve--signee dt { display: flex; align-items: center; gap: 0.4rem; }
.jx-releve--signee dt .jx-picto { color: var(--jx-signal); }

.jx-fiche__bas { display: grid; gap: 1.6rem; align-items: start; }
.jx-fiche__bas > * { min-width: 0; }

/* Sous la description : ce que l'acheteur reçoit vraiment, en clair. */
.jx-fiche__vente {
  border-left: 3px solid var(--jx-signal);
  background-color: var(--jx-panneau);
  padding: 0.8rem 1rem 0.9rem; margin: 1rem 0 0;
  font-size: 0.92rem; color: var(--jx-mot-doux);
}
.jx-fiche__vente strong { color: var(--jx-ambre); }

/* -------------------------------------------------------- panier et commande */

.jx-table--panier td { vertical-align: middle; }
.jx-panier__piece { display: flex; gap: 0.6rem; align-items: center; min-width: 0; }
.jx-panier__piece img { width: 72px; height: 54px; object-fit: cover; border: 1px solid var(--jx-trait); flex: 0 0 auto;
                        filter: saturate(.8) contrast(1.05); }
.jx-panier__piece small { color: var(--jx-mot-doux); font-size: 0.78rem; }
.jx-ligne-forme { display: flex; gap: 0.3rem; align-items: center; }
.jx-ligne-forme .jx-bouton { flex: 0 0 auto; }
.jx-table--panier td:last-child .jx-bouton { white-space: nowrap; }

/* Panier étroit : le tableau devient une pile de fiches (plus de colonnes écrasées). */
@media (max-width: 640px) {
  .jx-table--panier { font-size: 0.95rem; }
  .jx-table--panier thead { display: none; }
  .jx-table--panier tbody, .jx-table--panier tr, .jx-table--panier td { display: block; width: 100%; }
  .jx-table--panier tr { border: 1px solid var(--jx-trait); padding: 0.75rem 0.85rem; margin-bottom: 0.8rem; }
  .jx-table--panier td { border: none; padding: 0.32rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .jx-table--panier td::before { content: attr(data-th); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--jx-mot-doux); flex: 0 0 auto; }
  .jx-table--panier td:first-child { display: block; padding: 0 0 0.55rem; margin-bottom: 0.4rem; border-bottom: 1px dotted var(--jx-trait); }
  .jx-table--panier td:first-child::before,
  .jx-table--panier td:last-child::before { content: none; }
  .jx-table--panier td:last-child { justify-content: flex-end; padding-top: 0.5rem; }
}

/* Le pied du panier tient sur deux colonnes quand la place le permet : le port à
   calculer d'un côté, l'addition de l'autre, alignée sur le bord de la table. */
.jx-addition { margin-top: 1.6rem; display: grid; gap: 0.9rem; justify-items: start; max-width: 38rem; }
@media (min-width: 60rem) {
  .jx-addition {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    align-items: start; column-gap: 2.4rem;
  }
  .jx-addition .jx-cp { grid-column: 1; align-self: center; }
  .jx-addition .jx-releve--total { grid-column: 2; grid-row: 1 / span 2; }
  .jx-addition__mot { grid-column: 1; }
  .jx-addition__actions { grid-column: 1 / -1; }
}
.jx-addition__mot { font-size: 0.9rem; color: var(--jx-signal); font-weight: 700; margin: 0; }
.jx-addition__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.jx-addition .jx-releve--total { width: 100%; }

.jx-erreurs { background-color: #2b1610; border-left: 4px solid var(--jx-signal); padding: 0.8rem 1rem; margin-bottom: 1.4rem; color: var(--jx-mot); }
.jx-erreurs ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

.jx-commande { display: grid; gap: 1.8rem; align-items: start; }
.jx-commande > * { min-width: 0; }
.jx-commande__forme h2:first-of-type { margin-top: 0; }
.jx-commande__forme h2 { font-size: 1.25rem; margin-top: 1.6rem; }
.jx-commande__resume { background-color: var(--jx-panneau); border: 1px solid var(--jx-trait); border-top: 3px solid var(--jx-signal); padding: 1rem; }
.jx-commande__liste { list-style: none; margin: 0 0 0.8rem; padding: 0; font-size: 0.88rem; }
.jx-commande__liste li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--jx-trait); }
.jx-commande__note { font-size: 0.8rem; color: var(--jx-mot-doux); }

.jx-avance { background-color: var(--jx-panneau); border-left: 4px solid var(--jx-vert); padding: 0.9rem 1.1rem; font-size: 1rem; max-width: 70ch; }
.jx-recap { display: grid; gap: 1.8rem; align-items: start; margin: 1.6rem 0; }
.jx-recap > * { min-width: 0; }
.jx-suite-liste { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.9rem; }
.jx-suite-liste li { padding-left: 1rem; position: relative; margin-bottom: 0.5rem; }
.jx-suite-liste li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--jx-signal); }

/* ---------------------------------------------------------- rangée mobile

   Une rangée de talons qui dérive lentement vers la gauche, comme le tapis du
   quai. Elle se lit à la main : la barre défile, les flèches et les points
   sont de vrais liens, et le mouvement s'arrête dès qu'on la touche.        */

.jx-rampe { position: relative; padding: 3rem 0; }
.jx-rampe::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; opacity: .5; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, var(--jx-signal) 0 9px, var(--jx-fond-2) 9px 18px);
}
.jx-rampe__tete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 0.6rem 1.5rem; margin-bottom: 1.1rem;
  border-bottom: 3px solid var(--jx-signal); padding-bottom: 0.6rem;
}
.jx-rampe__tete h2 { margin: 0; }
.jx-rampe__mot { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--jx-mot-doux); max-width: 58ch; }
.jx-rampe__minuteur {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--jx-titre); font-size: 0.86rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--jx-encre); background: var(--jx-ambre);
  padding: 0.12rem 0.85rem 0.12rem 0.5rem;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  animation: jx-clignote 4s linear infinite;
}
.jx-rampe__gouverne { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.jx-rampe__fleche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; padding: 0;
  border: 1px solid var(--jx-trait-fort); background: var(--jx-panneau);
  color: var(--jx-signal); text-decoration: none; cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, opacity .14s ease;
}
.jx-rampe__fleche:hover:not(:disabled), .jx-rampe__fleche:focus-visible { background: var(--jx-signal); color: var(--jx-encre); border-color: var(--jx-signal); }
.jx-rampe__fleche:disabled { opacity: .35; cursor: default; }

.jx-rampe__rail {
  --jx-course: 96px;
  overflow-x: auto; overflow-y: hidden; min-width: 0;
  /* proximity et non mandatory : un calage obligatoire ramène le rail en
     arrière pendant que les flèches le poussent en avant. */
  scroll-snap-type: x proximity; scrollbar-width: thin;
  scrollbar-color: var(--jx-signal) var(--jx-fond-2);
  padding-block: 0.4rem 0.9rem;
  padding-inline: var(--jx-marge-rail);
  /* Le retrait de tête fait partie du rail : l'accroche d'un talon se cale
     après lui, sinon le navigateur ravale la course dès le premier calage. */
  scroll-padding-inline-start: var(--jx-course);
}
/* Posée à l'intérieur d'une colonne de texte, la rangée n'a pas de marge à rattraper. */
.jx-rampe--dedans { padding: 0 0 1.4rem; margin: 0 0 1.2rem; border-bottom: 1px solid var(--jx-trait); }
.jx-rampe--dedans::before { display: none; }
.jx-rampe--dedans .jx-rampe__rail { padding-inline: 0; }
.jx-rampe--dedans .jx-rampe__tete { margin-bottom: 0.6rem; }
.jx-rampe--dedans h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }

.jx-rampe__rail::-webkit-scrollbar { height: 6px; }
.jx-rampe__rail::-webkit-scrollbar-track { background: var(--jx-fond-2); }
.jx-rampe__rail::-webkit-scrollbar-thumb { background: var(--jx-signal); }

/* La rangée se pousse à la main : molette, doigt, flèches. Aucune dérive
   automatique — un mouvement continu se bat avec le défilement et rend les
   commandes imprévisibles. */
.jx-rampe__piste {
  display: flex; gap: 1rem; margin: 0;
  padding: 0 calc(var(--jx-course) + 8px) 0 var(--jx-course);
  list-style: none; width: max-content;
}

.jx-rampe__case { width: 16rem; max-width: 78vw; min-width: 0; scroll-snap-align: start; display: flex; }
.jx-rampe__case:focus { outline: none; }
.jx-rampe__case > .jx-talon { width: 100%; }

.jx-rampe__vide { background-color: var(--jx-panneau); border: 1px solid var(--jx-trait); padding: 1rem; color: var(--jx-mot-doux); }

/* ------------------------------------------------- ce qui sort aujourd'hui */

.jx-compte-jour { display: grid; gap: 1.6rem; align-items: center; }
.jx-compte-jour > * { min-width: 0; }
.jx-compte-jour__photo {
  position: relative; --coin: 22px;
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.jx-compte-jour__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-height: 0; filter: url(#jx-duoton); }
.jx-compte-jour__legende {
  position: absolute; left: 0; bottom: 0;
  background: var(--jx-fond-2); color: var(--jx-ambre);
  font-family: var(--jx-titre); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 1rem 0.3rem 0.7rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.jx-compte-jour__grille { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.jx-compte-jour__case {
  background-color: var(--jx-panneau); border: 1px solid var(--jx-trait);
  border-left: 3px solid var(--jx-signal);
  padding: 0.8rem 0.8rem 0.9rem; min-width: 0; --coin: 13px;
}
.jx-compte-jour__case .jx-picto--gros { margin-bottom: 0.25rem; }
.jx-compte-jour__nb {
  display: block; font-family: var(--jx-titre); font-weight: 800; line-height: 1;
  font-size: clamp(2.6rem, 7vw, 3.9rem); color: var(--jx-ambre);
  font-variant-numeric: tabular-nums;
}
.jx-compte-jour__mot { display: block; font-size: 0.82rem; color: var(--jx-mot-doux); margin-top: 0.25rem; }
.jx-compte-jour__pied { font-size: 0.85rem; color: var(--jx-mot-faible); margin: 1rem 0 0; }

/* ------------------------------------------------------- le trajet d'un colis */

.jx-trajet__bandeau {
  position: relative; margin-bottom: 1.4rem; --coin: 24px;
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.jx-trajet__bandeau img { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; min-height: 0; filter: url(#jx-duoton); }
.jx-trajet__legende {
  position: absolute; left: 0; bottom: 0;
  background: var(--jx-signal); color: var(--jx-encre);
  font-family: var(--jx-titre); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.32rem 1.1rem 0.32rem 0.7rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.jx-trajet__liste { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.jx-trajet__etape {
  background-color: var(--jx-panneau); border: 1px solid var(--jx-trait);
  border-top: 3px solid var(--jx-signal);
  padding: 0.9rem 0.85rem 1rem; min-width: 0; --coin: 13px;
}
.jx-trajet__signe { color: var(--jx-signal); display: block; margin-bottom: 0.5rem; }
.jx-trajet__titre {
  font-family: var(--jx-titre); font-size: 1.15rem; text-transform: uppercase;
  letter-spacing: 0.03em; margin: 0 0 0.3rem; color: var(--jx-mot);
}
.jx-trajet__mot { margin: 0; font-size: 0.86rem; color: var(--jx-mot-doux); }

/* ------------------------------------------------- une voix, mise en bordereau */

.jx-voix { display: grid; gap: 1.6rem; align-items: stretch; }
.jx-voix > * { min-width: 0; }
.jx-voix__photo {
  position: relative; --coin: 22px;
  clip-path: polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.jx-voix__photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-height: 0; filter: url(#jx-duoton); }
.jx-voix__bordereau {
  background-color: var(--jx-panneau); border: 1px solid var(--jx-trait);
  padding: 0; display: flex; flex-direction: column;
}
.jx-voix__entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: var(--jx-panneau-2); border-bottom: 1px solid var(--jx-trait);
  padding: 0.45rem 0.85rem;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jx-mot-doux);
}
.jx-voix__entete .jx-picto { color: var(--jx-signal); }
.jx-voix__corps { padding: 1.1rem 1rem 1.2rem; flex: 1 1 auto; }
.jx-voix__citation {
  margin: 0 0 1rem; font-family: var(--jx-titre); font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.95rem); line-height: 1.2;
  text-transform: uppercase; color: var(--jx-mot);
}
.jx-voix__lignes { display: grid; gap: 0.1rem 1rem; margin: 0; font-size: 0.85rem; }
.jx-voix__lignes dt {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--jx-mot-faible); border-top: 1px solid var(--jx-trait); padding-top: 0.4rem;
}
.jx-voix__lignes dd { margin: 0 0 0.65rem; font-weight: 600; color: var(--jx-mot); }
.jx-voix__pied {
  border-top: 1px solid var(--jx-trait); padding: 0.6rem 1rem 0.8rem;
  font-size: 0.78rem; color: var(--jx-mot-faible);
}

/* ------------------------------------------------------------------ palier 480 */

@media (min-width: 480px) {
  .jx-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jx-grille--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jx-pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jx-trajet__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jx-tableau__atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jx-voix__lignes { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
  .jx-voix__lignes dt { margin-bottom: 0.65rem; }
  .jx-coord__ligne { grid-template-columns: 2rem minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
  .jx-coord__quoi-val { grid-column: 3; grid-row: 1; }
}

/* ------------------------------------------------------------------ palier 760 */

@media (min-width: 760px) {
  .jx-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jx-grille--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jx-diptyque { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.2rem; }
  .jx-diptyque--inverse .jx-diptyque__photo { order: 2; }
  .jx-tableau__corps { padding: 2.6rem var(--jx-gouttiere) 2rem; }
  .jx-pied__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jx-bande, .jx-rampe { padding: 3.6rem 0; }
  .jx-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jx-fiche__bas { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .jx-commande { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .jx-recap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .jx-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jx-fiche__exp { order: 2; }
  .jx-fiche__photo { order: 1; }
  .jx-fiche__achat { order: 3; }
  .jx-compte-jour { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.2rem; }
  .jx-compte-jour__grille { gap: 1rem; }
  .jx-trajet__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jx-voix { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 2rem; }
  .jx-rampe__case { width: 17.5rem; }
  .jx-jalons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jx-ports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jx-moyens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------- palier 1040 */

@media (min-width: 1040px) {
  .jx-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jx-grille--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .jx-pied__colonnes { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  /* Expédition à gauche, photo au centre, règlement à droite. */
  .jx-fiche { grid-template-columns: minmax(0, 15rem) minmax(0, 1.9fr) minmax(0, 16rem); gap: 2rem; }
  .jx-fiche__exp   { order: 1; }
  .jx-fiche__photo { order: 2; }
  .jx-fiche__achat { order: 3; }
  .jx-trajet__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .jx-tableau__atouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jx-compte-jour__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
  .jx-bandeau__rang { flex-wrap: wrap; justify-content: space-between; }
  .jx-reglette { order: 3; flex-basis: 100%; }
}

/* ------------------------------------------- ce qui part en plus : quatre mises en page

   Quatre blocs, quatre dispositions : bande pleine largeur en fond photo,
   coupon à souche détachable, relevé sombre à bandeau haut, panneau à photo carrée. */

/* --- accueil : bande pleine largeur, texte posé sur la photo --------------- */

/* Sous 760 px la photo est une bande à part entière ; au-dessus elle occupe le
   fond et la fiche de texte vient s'y poser, en laissant la moitié droite lisible. */
.jx-prime-quai { position: relative; overflow: hidden; background: var(--jx-fond-2); color: var(--jx-mot); }
.jx-prime-quai__fond img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 62% center; min-height: 0;
                           filter: url(#jx-duoton); }
.jx-prime-quai__voile { display: none; }
.jx-prime-quai__corps { position: relative; padding-block: 1.6rem 2.4rem; }
.jx-prime-quai__carte { max-width: 42rem; }
.jx-prime-quai__seau {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jx-ambre); margin: 0 0 0.5rem;
}
.jx-prime-quai h2 { color: var(--jx-mot); max-width: 22ch; }
.jx-prime-quai__mot { max-width: 62ch; color: var(--jx-mot-doux); }
.jx-prime-quai__points { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: 0.9rem; }
.jx-prime-quai__points li {
  border-top: 2px solid var(--jx-signal); padding-top: 0.6rem;
  font-size: 0.9rem; color: var(--jx-mot-doux); min-width: 0;
}
.jx-prime-quai__points b {
  display: block; color: var(--jx-mot); font-family: var(--jx-titre);
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.jx-prime-quai__lien { margin: 0; }

/* --- fiche : coupon à souche détachable ----------------------------------- */

.jx-prime-talon { background-color: var(--jx-panneau); border: 1px solid var(--jx-trait); border-top: 3px solid var(--jx-signal); }
.jx-prime-talon__haut { padding: 1.2rem 1.1rem 1.4rem; }
.jx-prime-talon__mention {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jx-signal); margin: 0 0 0.4rem;
}
.jx-prime-talon h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.jx-prime-talon__haut p { max-width: 68ch; font-size: 0.95rem; color: var(--jx-mot-doux); }
.jx-prime-talon__lignes { display: grid; gap: 0 1rem; margin: 1.1rem 0 0; font-size: 0.86rem; }
.jx-prime-talon__lignes dt {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--jx-mot-faible); border-top: 1px solid var(--jx-trait); padding-top: 0.45rem;
}
.jx-prime-talon__lignes dd { margin: 0 0 0.7rem; font-weight: 600; color: var(--jx-mot); }
.jx-prime-talon__souche { border-top: 2px dashed var(--jx-trait-fort); padding: 0.55rem; }
.jx-prime-talon__souche img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; min-height: 0; filter: url(#jx-duoton); }
.jx-prime-talon__legende { margin: 0.45rem 0 0.15rem; font-size: 0.78rem; color: var(--jx-mot-faible); }

/* --- fiche : relevé sombre à bandeau haut --------------------------------- */

.jx-prime-releve { color: var(--jx-mot); }
.jx-prime-releve__bandeau { position: relative; }
.jx-prime-releve__bandeau img { width: 100%; aspect-ratio: 21 / 7; object-fit: cover; min-height: 0; filter: url(#jx-duoton); }
.jx-prime-releve__marque {
  position: absolute; left: 0; bottom: 0;
  background: var(--jx-signal); color: var(--jx-encre);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.28rem 1.1rem 0.28rem 0.7rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.jx-prime-releve__texte { padding-top: 1.3rem; }
.jx-prime-releve__texte h2 { color: var(--jx-mot); }
.jx-prime-releve__texte p { max-width: 66ch; color: var(--jx-mot-doux); font-size: 0.95rem; }
.jx-prime-releve__colonnes { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.jx-prime-releve__colonnes li { min-width: 0; border-left: 3px solid var(--jx-signal); padding-left: 0.8rem; }
.jx-prime-releve__colonnes p { margin: 0.25rem 0 0; font-size: 0.87rem; color: var(--jx-mot-doux); }
.jx-prime-releve__cle {
  display: block; font-family: var(--jx-titre); font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--jx-ambre);
}

/* --- page des premiers envois : panneau à photo carrée -------------------- */

.jx-prime-inaugural { background: var(--jx-bande-a); color: var(--jx-mot); padding: 2.6rem 0 3rem; }
.jx-prime-inaugural__cadre { display: grid; gap: 1.4rem; align-items: start; }
.jx-prime-inaugural__cadre > * { min-width: 0; }
.jx-prime-inaugural__photo { --coin: 18px; border: 1px solid var(--jx-trait); padding: 0.5rem; background-color: var(--jx-creux); }
.jx-prime-inaugural__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; min-height: 0; filter: url(#jx-duoton); }
.jx-prime-inaugural__sur {
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--jx-signal); margin: 0 0 0.45rem;
}
.jx-prime-inaugural h2 { color: var(--jx-mot); }
.jx-prime-inaugural__texte p { color: var(--jx-mot-doux); font-size: 0.95rem; max-width: 64ch; }
.jx-prime-inaugural__lignes {
  display: grid; gap: 0.15rem 1.1rem; margin: 1.2rem 0 0;
  border-top: 2px solid var(--jx-signal); padding-top: 0.9rem; font-size: 0.88rem;
}
.jx-prime-inaugural__lignes dt {
  font-family: var(--jx-titre); font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--jx-ambre);
}
.jx-prime-inaugural__lignes dd { margin: 0 0 0.8rem; color: var(--jx-mot-doux); }

/* --- page des premiers envois : ouverture et questions -------------------- */

.jx-inaugural-tete { position: relative; overflow: hidden; background: var(--jx-fond-2); color: var(--jx-mot); }
.jx-inaugural-tete__fond { position: absolute; inset: 0; }
.jx-inaugural-tete__fond img { width: 100%; height: 100%; object-fit: cover; filter: url(#jx-duoton); }
.jx-inaugural-tete__voile {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 46% at 30% -6%, rgba(255, 166, 74, .30) 0%, rgba(255, 166, 74, 0) 68%),
    linear-gradient(0deg, rgba(10, 14, 19, .95) 12%, rgba(10, 14, 19, .62) 70%, rgba(10, 14, 19, .88) 100%);
}
.jx-inaugural-tete__corps { position: relative; padding-block: 3rem 2.2rem; }
.jx-inaugural-tete h1 { color: var(--jx-mot); max-width: 18ch; }
.jx-inaugural-tete__mot { max-width: 60ch; color: var(--jx-mot-doux); }
.jx-inaugural-tete__rappel {
  display: inline-block; margin: 0.6rem 0 0; padding: 0.3rem 0.7rem;
  border: 1px solid var(--jx-signal); color: var(--jx-mot);
  font-size: 0.82rem; letter-spacing: 0.05em;
}
/* Une figure posée sur toute la largeur du contenu doit être recadrée en bandeau :
   sans cela, une photo de 1280 par 853 occupe un écran entier à elle seule. */
.jx-figure--bandeau { margin-top: 0; }
.jx-figure--bandeau img { aspect-ratio: 4 / 3; object-fit: cover; min-height: 0; }

.jx-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.jx-questions li {
  min-width: 0; background-color: var(--jx-panneau); border: 1px solid var(--jx-trait);
  border-left: 4px solid var(--jx-signal); padding: 0.8rem 0.95rem; --coin: 13px;
}
.jx-questions h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.jx-questions p { margin: 0; font-size: 0.9rem; color: var(--jx-mot-doux); }

@media (min-width: 480px) {
  .jx-prime-talon__lignes { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
  .jx-prime-talon__lignes dt { margin-bottom: 0.7rem; }
  .jx-prime-inaugural__lignes { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
}

@media (min-width: 760px) {
  .jx-prime-quai__fond { position: absolute; inset: 0; }
  .jx-prime-quai__fond img { height: 100%; aspect-ratio: auto; object-position: 74% center; }
  .jx-prime-quai__voile {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10, 14, 19, .94) 0%, rgba(10, 14, 19, .88) 52%, rgba(10, 14, 19, .24) 100%);
  }
  .jx-prime-quai__corps { padding-block: 3.4rem 3.6rem; }
  .jx-prime-quai__carte { max-width: 34rem; }
  .jx-prime-quai__points { gap: 0.9rem; }
  .jx-prime-releve__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jx-prime-inaugural__cadre { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 2rem; }
  .jx-prime-talon__haut { padding: 1.6rem 1.6rem 1.8rem; }
  .jx-prime-talon__souche img { aspect-ratio: 24 / 7; }
  .jx-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jx-inaugural-tete__corps { padding-block: 4.6rem 3.2rem; }
  .jx-figure--bandeau img { aspect-ratio: 16 / 6; }
}

@media (min-width: 1040px) {
  .jx-prime-quai__mot { max-width: 70ch; }
  .jx-prime-releve__bandeau img { aspect-ratio: 32 / 7; }
  .jx-prime-inaugural__cadre { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: 2.6rem; }
  .jx-questions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.jx-note__inter{font-family:var(--jx-titre);font-size:1.5rem;line-height: 1.16;letter-spacing:.01em;
  text-transform:uppercase;margin:2.1rem 0 .6rem;color:var(--jx-mot)}
.jx-releve{margin:1.6rem 0;border:1px solid var(--jx-trait);background-color:var(--jx-panneau)}
.jx-releve__titre{margin:0;padding:.45rem .8rem;background:var(--jx-panneau-2);color:var(--jx-ambre);
  font-family:var(--jx-titre);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--jx-trait)}
.jx-releve__liste{display:grid;grid-template-columns:auto 1fr;gap:.1rem .9rem;margin:0;padding:.7rem .8rem}
.jx-releve__liste dt{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--jx-mot-doux);min-width:0}
.jx-releve__liste dd{margin:0;font-size:.95rem;min-width:0}
.jx-consigne{margin:1.6rem 0;padding:.9rem 1rem;border-left:4px solid var(--jx-signal);background-color:var(--jx-panneau)}
.jx-consigne__titre{margin:0 0 .5rem;font-family:var(--jx-titre);font-size:1.05rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--jx-signal)}
.jx-consigne ol{margin:0;padding-left:1.2rem}
.jx-consigne li{margin:.28rem 0;font-size:.95rem;color:var(--jx-mot-doux)}
.jx-figure--intercalaire{margin:1.8rem 0}
@media (max-width:480px){.jx-releve__liste{grid-template-columns:1fr;gap:.05rem}
  .jx-releve__liste dd{margin-bottom:.45rem}}

.jx-registre{width:100%;border-collapse:collapse;margin:.9rem 0 .7rem;font-size:.92rem}
.jx-registre th,.jx-registre td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--jx-trait);min-width:0}
.jx-registre thead th{font-family:var(--jx-titre);font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--jx-signal);border-bottom:1px solid var(--jx-signal)}
.jx-registre tbody th{font-weight:500;color:var(--jx-mot)}
.jx-registre tbody td{color:var(--jx-mot-doux)}
.jx-registre__nb{font-family:var(--jx-titre);font-size:1.35rem;line-height:1;width:3.4rem;color:var(--jx-ambre)}
.jx-registre__note{display:block;font-size:.72rem;letter-spacing:.03em;color:var(--jx-mot-faible)}
.jx-registre__intro{margin:.2rem 0 0;font-size:.98rem;color:var(--jx-mot-doux)}
.jx-registre__pied{margin:.2rem 0 0;font-size:.79rem;color:var(--jx-mot-faible)}
@media (max-width:480px){.jx-registre{display:block;overflow-x:auto}}

.jx-cle{margin:.55rem 0 0;border-top:1px solid var(--jx-trait)}
.jx-cle>summary{cursor:pointer;list-style:none;padding:.5rem 0;font-family:var(--jx-titre);
  font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:var(--jx-signal)}
.jx-cle>summary::-webkit-details-marker{display:none}
.jx-cle>summary::after{content:"+";float:right;font-size:1.1rem;line-height:1}
.jx-cle[open]>summary::after{content:"\2212"}
.jx-cle__corps dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;margin:0 0 .7rem}
.jx-cle__corps dt{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--jx-mot-doux);min-width:0}
.jx-cle__corps dd{margin:0;font-size:.92rem;min-width:0;color:var(--jx-mot-doux)}
@media (max-width:480px){.jx-cle__corps dl{grid-template-columns:1fr;gap:.05rem}
  .jx-cle__corps dd{margin-bottom:.4rem}}

.jx-quete--404{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0 .8rem}
.jx-quete--404 label{flex:1 0 100%;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--jx-mot-doux)}
.jx-quete--404 input{flex:1 1 15rem;min-width:0;padding:.55rem .7rem;border:1px solid var(--jx-trait-fort);
  background:var(--jx-creux);color:var(--jx-mot);font:inherit}
.jx-404__sortie{font-size:.94rem}

.jx-bordereau__mention{margin:0 0 .6rem;font-family:var(--jx-titre);font-size:1.1rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--jx-mot-doux)}
.jx-bordereau{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.94rem}
.jx-bordereau th,.jx-bordereau td{padding:.42rem .6rem;border-bottom:1px dotted var(--jx-trait);text-align:left;min-width:0}
.jx-bordereau th{font-weight:500;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--jx-mot-doux);width:11rem}
.jx-bordereau td{color:var(--jx-mot)}
.jx-bordereau__suite{margin:0 0 .35rem;font-size:.94rem}
.jx-bordereau__portes{margin:0;padding-left:1.1rem}
.jx-bordereau__portes li{margin:.2rem 0}
@media (max-width:480px){.jx-bordereau th{width:auto}}

.jx-bloc{border:1px solid var(--jx-trait);background-color:var(--jx-panneau);padding:.9rem 1rem 1rem;margin:0 0 1.1rem;min-width:0}
.jx-bloc>legend{padding:0 .45rem;font-family:var(--jx-titre);font-size:1rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--jx-signal)}
.jx-champ--court input{max-width:9rem}

/* La réglette défile sur les écrans courts : sa barre doit rester discrète
   et aux couleurs du bandeau, pas celle du système. */
.jx-reglette__liste{scrollbar-color:var(--jx-signal) var(--jx-panneau)}
.jx-reglette__liste::-webkit-scrollbar{height:3px}
.jx-reglette__liste::-webkit-scrollbar-track{background:var(--jx-panneau)}
.jx-reglette__liste::-webkit-scrollbar-thumb{background:var(--jx-signal)}

/* -------------------------------------------------------------- mouvements

   Deux choses bougent, et rien d'autre : l'étiquette du jour même qui se
   rappelle au regard, la rangée de fiches qui dérive.                       */

@keyframes jx-clignote {
  0%, 88%      { filter: none; }
  88.01%, 93%  { filter: brightness(1.9) saturate(1.15); }
  93.01%, 100% { filter: none; }
}

/* Qui demande le calme l'obtient : plus rien ne bouge, tout reste lisible. */
@media (prefers-reduced-motion: reduce) {
  .jx-etiquette--vif,
  .jx-rampe__minuteur { animation: none !important; }
  .jx-rampe__rail { scroll-behavior: auto; }
}

/* ------------------------------------------------------ vignettes de genre

   Le rayon des jeux ouvre sur ses rubriques : une photo, un nom, un compte.
   La rangée défile sous 760 px et se pose en grille au-dessus.               */

.jx-familles {
  display: grid; gap: 0.7rem; margin: 1.2rem auto 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jx-famille {
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
  background: var(--jx-panneau); border: 1px solid var(--jx-trait);
  border-bottom: 3px solid var(--jx-trait-fort);
  padding: 0 0 0.5rem; text-decoration: none; color: var(--jx-mot);
}
.jx-famille:hover, .jx-famille:focus { border-bottom-color: var(--jx-signal); background: var(--jx-panneau-2); }
.jx-famille[aria-current="page"] { border-bottom-color: var(--jx-signal); background: var(--jx-panneau-2); }
.jx-famille__photo { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.jx-famille__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: url(#jx-duoton); opacity: 0.85;
}
.jx-famille:hover .jx-famille__photo img, .jx-famille:focus .jx-famille__photo img { opacity: 1; }
.jx-famille__nom {
  font-family: var(--jx-titre); font-size: 1.15rem; font-weight: 800;
  letter-spacing: 0.02em; padding: 0.35rem 0.6rem 0;
}
.jx-famille__nb { font-size: 0.74rem; color: var(--jx-mot-faible); padding: 0 0.6rem; }

/* ------------------------------------------------------- rangées de filtres

   Une ligne par critère : son nom à gauche, ses puces à la suite. Tout est
   un lien, rien n'attend de script pour fonctionner.                        */

.jx-selection {
  border-block: 1px solid var(--jx-trait);
  padding: 0.6rem 0; margin: 1.1rem 0 1.4rem;
  display: grid; gap: 0.5rem;
}
.jx-selection__ligne { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.jx-selection__nom {
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-width: 7.5rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--jx-mot-faible);
}
.jx-selection__nom .jx-picto { color: var(--jx-signal); }
.jx-selection__reprise { margin: 0.2rem 0 0; font-size: 0.82rem; }
.jx-selection__reprise a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--jx-mot-doux); }
.jx-selection__reprise a:hover { color: var(--jx-signal); }

/* Catalogue : bandeau de tri façon tableau de départs. Une barre compacte de
   menus déroulants, pas de bannière ni de rangées de puces. */
.jx-tb {
  background: var(--jx-fond-2);
  border: 1px solid var(--jx-trait);
  border-top: 2px solid var(--jx-signal);
  padding: 0.65rem 0.85rem;
  margin: 0.4rem 0 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1rem;
}
.jx-tb__enseigne { display: flex; align-items: baseline; gap: 0.65rem; margin-right: auto; }
.jx-tb__titre {
  margin: 0; font-family: var(--jx-titre); font-size: 1.15rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--jx-mot);
}
.jx-tb__compte { margin: 0; font-size: 0.8rem; color: var(--jx-mot-doux); white-space: nowrap; }
.jx-tb__compte b { font-family: var(--jx-titre); font-size: 1rem; color: var(--jx-ambre); }

.jx-tb__axes { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.jx-tb__axe { position: relative; overflow: visible; }
.jx-tb__axe > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--jx-trait-fort); background: var(--jx-panneau);
  padding: 0.28rem 0.6rem; color: var(--jx-mot); user-select: none;
}
.jx-tb__axe > summary::-webkit-details-marker { display: none; }
.jx-tb__k { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--jx-mot-doux);
            text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }
.jx-tb__k .jx-picto { color: var(--jx-signal); }
.jx-tb__v { font-family: var(--jx-titre); font-size: 0.9rem; }
.jx-tb__v::after { content: '▾'; margin-left: 0.35rem; color: var(--jx-mot-faible); font-size: 0.72em; }
.jx-tb__axe[open] > summary { border-color: var(--jx-signal); background: var(--jx-panneau-2); }
.jx-tb__axe.is-set > summary { border-color: var(--jx-signal); }
.jx-tb__axe.is-set .jx-tb__v { color: var(--jx-signal); }

.jx-tb__menu {
  display: grid; gap: 1px; margin-top: 0.35rem; padding: 0.3rem;
  background: var(--jx-fond-2); border: 1px solid var(--jx-trait-fort);
}
.jx-tb__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.3rem 0.5rem; font-size: 0.82rem; text-decoration: none; color: var(--jx-mot);
}
.jx-tb__opt b { font-family: var(--jx-titre); color: var(--jx-mot-faible); font-size: 0.85rem; }
.jx-tb__opt:hover { background: var(--jx-panneau-2); color: var(--jx-mot); }
.jx-tb__opt.is-on { background: var(--jx-signal); color: var(--jx-encre); }
.jx-tb__opt.is-on b { color: var(--jx-encre); }

.jx-tb__clear { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--jx-mot-doux); }
.jx-tb__clear .jx-picto { color: var(--jx-signal); }
.jx-tb__clear:hover { color: var(--jx-signal); }

@media (max-width: 47.99rem) {
  .jx-tb__enseigne { width: 100%; }
  .jx-tb__axes { flex-direction: column; align-items: stretch; width: 100%; }
  .jx-tb__axe > summary { justify-content: space-between; }
}
@media (min-width: 48rem) {
  .jx-tb__menu {
    position: absolute; top: 100%; left: 0; z-index: 30;
    min-width: 13rem; max-height: 62vh; overflow: auto;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  }
}

/* --------------------------------------------------------- blocs par genre */

.jx-groupe { margin-bottom: 2.6rem; }
.jx-groupe__tete {
  border-top: 3px solid var(--jx-signal);
  padding-top: 0.55rem; margin-bottom: 0.9rem;
}
.jx-groupe__titre {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  font-size: 1.55rem;
}
.jx-groupe__titre span {
  font-family: var(--jx-texte); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--jx-mot-faible);
}
.jx-groupe__mot { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--jx-mot-doux); max-width: 76ch; }
.jx-groupe__suite { margin: 0.3rem 0 0; font-size: 0.82rem; font-weight: 700; }
.jx-groupe__suite a { color: var(--jx-ambre); }

/* Le genre écrit en tête de fiche, à la place de l'ancienne référence. */
.jx-talon__genre { font-weight: 700; color: var(--jx-mot-doux); }

/* Renvoi discret au bout d'une rangée mobile. */
.jx-rampe__tout {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--jx-mot-doux); text-decoration: none;
  border: 1px solid var(--jx-trait-fort); padding: 0.3rem 0.7rem;
}
.jx-rampe__tout:hover, .jx-rampe__tout:focus { color: var(--jx-encre); background: var(--jx-signal); border-color: var(--jx-signal); }
.jx-rampe__tout .jx-picto { color: inherit; }

/* --------------------------------------------- mentions légales du pied */

.jx-pied__legal {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.8rem;
}
.jx-pied__legal a { color: var(--jx-mot-faible); }
.jx-pied__legal a:hover { color: var(--jx-signal); }

@media (min-width: 480px) {
  .jx-familles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .jx-familles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; }
  .jx-selection { gap: 0.35rem; }
}
@media (min-width: 1040px) {
  .jx-groupe__titre { font-size: 1.8rem; }
}

/* --------------------------------------------------------------- le panier --
   La pièce prend la place qu'il lui faut, les colonnes de service se serrent
   sur leur contenu : sans cela chaque colonne recevait un sixième de la largeur. */
.jx-table--panier { table-layout: auto; }
.jx-table--panier th:first-child,
.jx-table--panier td:first-child { width: auto; }
.jx-table--panier th:not(:first-child),
.jx-table--panier td:not(:first-child) { width: 1%; white-space: nowrap; }
.jx-table--panier td:first-child { white-space: normal; }
.jx-table--panier .jx-panier__piece span { min-width: 0; }
.jx-table--panier .jx-ligne-forme { display: flex; align-items: center; gap: .4rem; }

/* Le remplissage automatique de Chrome repeint le fond du champ en blanc et
   ignore background-color : seule l'ombre intérieure tient, et il faut la poser
   sur TOUS les champs, pas seulement ceux qui portent une classe. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 100px var(--jx-creux) !important;
  box-shadow: inset 0 0 0 100px var(--jx-creux) !important;
  -webkit-text-fill-color: var(--jx-mot) !important;
  caret-color: var(--jx-mot);
  transition: background-color 5000s ease-in-out 0s;
}

/* ------------------------------------------------------- page de commande --
   Deux champs courts tiennent sur une ligne : un code postal seul au milieu
   d'une colonne de champs pleine largeur casse le rythme. */
.jx-champs-paire { display: grid; gap: 0 .8rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .jx-champs-paire { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); }
}
.jx-champs-paire .jx-champ { margin-bottom: 0.9rem; }

/* Le récapitulatif suit la colonne de saisie au lieu de laisser la moitié
   droite de la page vide sur toute la hauteur du formulaire. */
@media (min-width: 62rem) {
  .jx-commande__resume { position: sticky; top: 1.2rem; }
}

/* Le cadre Vanilla restyle les champs par sélecteur d'attribut
   (`[type="text"]:hover/:focus/:active { background: var(--vf-color-background-active) }`,
   spécificité 0,2,1) et bat nos `input:...` (0,1,1) : au survol le fond vire au
   blanc et le texte disparaît. Un `!important` l'emporte sur n'importe quelle
   spécificité non-importante, donc on verrouille fond + texte sur TOUS les types
   de champ et TOUS les états. Rien d'autre ne doit repeindre un champ. */
input, select, textarea,
input:hover, input:focus, input:active, input:focus-visible, input:focus-within,
select:hover, select:focus, select:active, select:focus-visible,
textarea:hover, textarea:focus, textarea:active, textarea:focus-visible {
  background-color: var(--jx-creux) !important;
  color: var(--jx-mot) !important;
  -webkit-text-fill-color: var(--jx-mot) !important;
  border-color: var(--jx-trait-fort);
  caret-color: var(--jx-signal);
}
input::placeholder, textarea::placeholder {
  color: var(--jx-mot-faible) !important;
  -webkit-text-fill-color: var(--jx-mot-faible) !important;
  opacity: 1;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--jx-signal) !important;
  outline-offset: 1px;
  border-color: var(--jx-signal) !important;
}