/* qrleads.net v3 — un comptoir de sourcing B2B. Direction : clair, exact, rassurant ; lisible avant tout.
   Monde : la fiche technique et le bon de commande. Signature : la tuile d'élément (symbole, code, grade) sur chaque ingrédient.
   Une seule couleur d'accent, le rouge Qronos, réservée aux actions et au panier. Clair par défaut, sombre selon le système ou au choix. */
:root {
  --bg: #f7f6f3; --surface: #ffffff; --sunk: #efede8; --ink: #16161a; --text2: #3f3f47; --muted: #66666f; --rule: #e2e0da; --rule-strong: #c9c6be;
  --accent: #a3111f; --accent-hover: #86101a; --accent-ink: #ffffff; --accent-soft: #f6e7e8; --ok: #2f6b3a;
  --f-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1); --r: 8px; --r-s: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111114; --surface: #19191d; --sunk: #0c0c0e; --ink: #ececf0; --text2: #c4c4cc; --muted: #93939e; --rule: #2a2a31; --rule-strong: #3c3c45;
  --accent: #ff5a66; --accent-hover: #ff7a84; --accent-ink: #16161a; --accent-soft: #2a1618; --ok: #7fc28a; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #111114; --surface: #19191d; --sunk: #0c0c0e; --ink: #ececf0; --text2: #c4c4cc; --muted: #93939e; --rule: #2a2a31; --rule-strong: #3c3c45;
  --accent: #ff5a66; --accent-hover: #ff7a84; --accent-ink: #16161a; --accent-soft: #2a1618; --ok: #7fc28a; color-scheme: dark; }
:root:lang(zh) { --f-sans: "IBM Plex Sans", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
:root:lang(ja) { --f-sans: "IBM Plex Sans", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; }
:root:lang(th) { --f-sans: "IBM Plex Sans", "Noto Sans Thai", "Thonburi", sans-serif; }
:root:lang(hi) { --f-sans: "IBM Plex Sans", "Noto Sans Devanagari", "Kohinoor Devanagari", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--f-sans); overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gut { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.in { max-width: 1240px; margin: 0 auto; }
.mono { font: 400 13px/1.5 var(--f-mono); color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }

/* ---------- transitions entre pages ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- en-tête ---------- */
.entete { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--rule); }
.entete .in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding-block: 12px 0; }
.marque { display: inline-flex; align-items: baseline; gap: 6px; font: 600 18px/1 var(--f-sans); text-decoration: none; white-space: nowrap; }
.marque b { color: var(--accent); }
.marque span { font: 400 12px var(--f-mono); color: var(--muted); }
.recherche { position: relative; max-width: 560px; width: 100%; }
.recherche input { width: 100%; padding: 10px 12px 10px 40px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--bg); font-size: 15px; }
.recherche input:focus { border-color: var(--ink); outline: none; background: var(--surface); }
.recherche svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.6; }
.outils { display: flex; gap: 8px; align-items: center; }
.outils select, .bouton-icone { font: 500 14px var(--f-sans); background: transparent; border: 1px solid var(--rule); border-radius: var(--r); padding: 8px 10px; color: var(--ink); cursor: pointer; }
.bouton-icone { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.bouton-icone svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.panier-lien { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.panier-lien:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.compteur { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 600 12px/20px var(--f-sans); text-align: center; }
.menu { grid-column: 1 / -1; display: flex; gap: 0 28px; overflow-x: auto; scrollbar-width: none; }
.menu a { font: 500 15px/1 var(--f-sans); color: var(--text2); text-decoration: none; padding: 14px 0 12px; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s var(--ease), border-color .15s var(--ease); }
.menu a:hover { color: var(--ink); }
.menu a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.menu .compteur { margin-left: 4px; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--f-sans); padding: 13px 18px; border-radius: var(--r); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); text-decoration: none; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease); }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { transform: scale(.98); }
.btn.sec { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.btn.sec:hover { border-color: var(--ink); }
.btn.petit { padding: 7px 10px; font-size: 13px; font-weight: 500; border-radius: var(--r-s); }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- héros ---------- */
.heros { border-bottom: 1px solid var(--rule); background: var(--surface); }
.heros .in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding-block: 64px; }
.heros .surtitre { font: 500 14px var(--f-sans); color: var(--accent); margin: 0 0 12px; }
.heros h1 { margin: 0 0 16px; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.heros p.chapo { margin: 0 0 24px; max-width: 56ch; font-size: 19px; color: var(--text2); }
.heros .recherche { max-width: 600px; margin-bottom: 16px; }
.heros .recherche input { padding-block: 15px; font-size: 16px; }
.garanties { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.garanties li { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--text2); }
.garanties li::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); }
.vitrine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vitrine .tuile:nth-child(even) { translate: 0 24px; }

/* ---------- sections ---------- */
.section { padding-block: 56px; }
.section + .section { border-top: 1px solid var(--rule); }
.titre-section { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.titre-section h2 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); }
.titre-section a { font: 500 15px var(--f-sans); color: var(--accent); text-decoration: none; }
.titre-section a:hover { text-decoration: underline; }
.page-titre { padding-block: 32px 24px; }
.page-titre h1 { margin: 0 0 8px; font-size: clamp(28px, 3.6vw, 40px); }
.page-titre p { margin: 0; max-width: 70ch; color: var(--text2); font-size: 18px; }
.ariane ol { list-style: none; margin: 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font: 400 14px var(--f-sans); color: var(--muted); }
.ariane li + li::before { content: "›"; margin-right: 6px; }
.ariane a { text-decoration: none; color: var(--text2); }
.ariane a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- catégories ---------- */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cat { display: grid; grid-template-rows: 140px auto; overflow: hidden; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule); text-decoration: none; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.cat:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.cat .plaque { margin: 0; overflow: hidden; background: var(--sunk); }
.cat .plaque img { width: 100%; height: 100%; object-fit: cover; }
.cat div { padding: 12px 14px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cat b { font-weight: 600; font-size: 16px; }
.cat span { font: 400 13px var(--f-mono); color: var(--muted); }

/* ---------- tuiles d'élément (signature) ---------- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tuile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.tuile:hover { border-color: var(--rule-strong); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.tuile .haut { display: flex; justify-content: space-between; gap: 8px; font: 400 12px var(--f-mono); color: var(--muted); }
.sym { display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: var(--r-s); font: 600 24px/1 var(--f-sans); letter-spacing: -.02em; align-self: flex-start; }
.tuile h3 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 600; }
.tuile h3 a { text-decoration: none; }
.tuile h3 a::after { content: ""; position: absolute; inset: 0; }  /* toute la tuile est cliquable */
.tuile .grade { font: 500 13px var(--f-mono); color: var(--ink); }
.tuile .bas { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--rule); }
.tuile .bas > * { position: relative; z-index: 1; }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille { font: 500 12px/1 var(--f-sans); padding: 5px 8px; border-radius: 4px; background: var(--sunk); color: var(--text2); white-space: nowrap; }
.p-label { background: transparent; border: 1px solid var(--rule-strong); color: var(--ink); }
.p-nf { background: #fbf1dc; color: #7a5300; } .p-fr { background: #e6f0e7; color: #2f5b36; } .p-risque { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .p-nf { background: #2c2410; color: #e0b25a; } :root[data-theme="dark"] .p-fr { background: #18261a; color: #8fcf99; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-nf { background: #2c2410; color: #e0b25a; } :root:not([data-theme="light"]) .p-fr { background: #18261a; color: #8fcf99; } }
.comparer { display: inline-flex; align-items: center; gap: 6px; font: 400 13px var(--f-sans); color: var(--muted); cursor: pointer; background: none; border: 0; padding: 4px 0; }
.comparer::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--rule-strong); border-radius: 3px; }
.comparer[aria-pressed="true"] { color: var(--ink); }
.comparer[aria-pressed="true"]::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--surface); }

/* ---------- catalogue ---------- */
.boutique { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding-bottom: 96px; }
.filtres { display: grid; gap: 24px; }  /* pas de défilement interne : la barre masquait les nombres */
.filtres fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.filtres legend { font: 600 14px var(--f-sans); margin-bottom: 8px; }
.filtres label { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--text2); cursor: pointer; }
.filtres label span { margin-left: auto; font: 400 12px var(--f-mono); color: var(--muted); }
.filtres input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.barre-resultats { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.barre-resultats .recherche { flex: 1; min-width: 200px; }
.barre-resultats select { font: 500 14px var(--f-sans); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 9px 10px; }
.vide { padding: 32px 0; color: var(--muted); }
.panneau summary { display: none; }

/* ---------- fiche produit ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; padding-block: 16px 56px; align-items: start; }
.fiche .entete-fiche { display: flex; gap: 20px; align-items: center; margin-bottom: 16px; }
.fiche .sym { min-width: 96px; height: 96px; font-size: 34px; border-width: 2px; }
.fiche h1 { margin: 0 0 4px; font-size: clamp(26px, 3.2vw, 36px); text-wrap: balance; }
.fiche .chapo { margin: 0 0 16px; font-size: 18px; color: var(--text2); }
.specs { margin: 24px 0; display: grid; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.specs div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 12px 16px; }
.specs div + div { border-top: 1px solid var(--rule); }
.specs dt { font: 500 14px/1.6 var(--f-sans); color: var(--muted); }
.specs dd { margin: 0; }
.encart-achat { position: sticky; top: 140px; display: grid; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.encart-achat h2 { margin: 0; font-size: 18px; }
.encart-achat p { margin: 0; font-size: 15px; color: var(--text2); }
.encart-achat ol { margin: 0; padding-left: 20px; font-size: 15px; color: var(--text2); display: grid; gap: 4px; }
.note { font: 400 14px/1.6 var(--f-sans); color: var(--muted); margin: 0; }
.faq { margin-top: 32px; }
.faq h2 { font-size: 22px; margin: 0 0 12px; }
.faq details { border-top: 1px solid var(--rule); padding: 14px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 8px 0 0; color: var(--text2); }

/* ---------- panier de demande ---------- */
.panier { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; padding-bottom: 96px; }
.ligne-panier { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 16px; padding: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.ligne-panier + .ligne-panier { margin-top: 12px; }
.ligne-panier .sym { min-width: 52px; height: 52px; font-size: 18px; }
.ligne-panier h3 { margin: 0; font-size: 16px; }
.ligne-panier h3 a { text-decoration: none; }
.ligne-panier .champs { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.2fr); gap: 8px 12px; }
.ligne-panier .champs label { display: grid; gap: 4px; font: 500 13px var(--f-sans); color: var(--muted); }
.ligne-panier .champs .large { grid-column: 1 / -1; }
.ligne-panier input, .ligne-panier select, .ligne-panier textarea { font-size: 15px; padding: 9px 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-s); background: var(--bg); color: var(--ink); width: 100%; }
.ligne-panier textarea { min-height: 64px; resize: vertical; }
.retirer { background: none; border: 0; color: var(--muted); cursor: pointer; font: 500 14px var(--f-sans); padding: 4px; }
.retirer:hover { color: var(--accent); }
.recap { position: sticky; top: 140px; padding: 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.recap h2 { margin: 0 0 12px; font-size: 20px; }
.confirmation { padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--ok); }
.confirmation h2 { margin: 0 0 8px; color: var(--ok); }
.reference { font: 600 20px var(--f-mono); letter-spacing: .02em; }

/* ---------- comparateur (barre basse) ---------- */
.plateau { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); translate: -50% 24px; z-index: 45; display: flex; gap: 12px; align-items: center; padding: 8px 8px 8px 14px; background: var(--ink); color: var(--bg); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.2); max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; visibility: hidden; transition: translate .25s var(--ease), opacity .25s var(--ease), visibility .25s; }
.plateau.ouvert { opacity: 1; translate: -50% 0; pointer-events: auto; visibility: visible; }
.plateau .syms { display: flex; gap: 4px; font: 600 13px var(--f-sans); }
.plateau .syms span { padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius: 4px; }
.plateau .btn { padding: 9px 12px; font-size: 14px; white-space: nowrap; }
.plateau button.vider { background: none; border: 0; color: inherit; opacity: .75; cursor: pointer; font: 500 13px var(--f-sans); white-space: nowrap; }
.table-comp { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; background: var(--surface); }
.table-comp th, .table-comp td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.table-comp th[scope="row"] { font: 500 14px var(--f-sans); color: var(--muted); width: 180px; }
.table-comp thead .sym { margin-bottom: 8px; display: grid; }
.table-comp td.diff { background: var(--accent-soft); }
.defile { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); }

/* ---------- texte courant, actualités, salons ---------- */
.prose { max-width: 760px; padding-bottom: 96px; }
.prose h2 { margin: 36px 0 10px; font-size: 22px; }
.prose p, .prose li { color: var(--text2); }
.prose a { color: var(--accent); }
.prose .maj, .prose .meta { font: 400 14px var(--f-sans); color: var(--muted); }
.prose .chapo { font-size: 19px; color: var(--ink); }
.sources { margin-top: 36px; border-top: 1px solid var(--rule); padding-top: 16px; }
.puces { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.puces button { font: 500 14px var(--f-sans); border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 20px; padding: 7px 14px; cursor: pointer; }
.puces button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.actus { list-style: none; margin: 0; padding: 0; }
.actus li { display: grid; grid-template-columns: 104px 132px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.actus .meta { font: 400 13px/1.7 var(--f-mono); color: var(--muted); }
.actus .type { font: 600 13px/1.7 var(--f-sans); color: var(--accent); }
.actus a { font-weight: 500; font-size: 17px; line-height: 1.4; text-decoration: none; }
.actus a:hover { text-decoration: underline; }
.actus .src { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.salons { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.salon { display: grid; gap: 6px; padding: 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.salon .date { font: 600 15px var(--f-sans); color: var(--accent); }
.salon h3 { margin: 0; font-size: 18px; }
.salon .lieu { font-size: 15px; color: var(--text2); }
.salon a { font-size: 14px; color: var(--muted); }

/* ---------- appels, étapes, piliers ---------- */
.appels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.appel { padding: 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule); display: grid; gap: 12px; align-content: start; }
.appel.fort { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.appel.fort p { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.appel.fort .btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.appel h2 { margin: 0; font-size: 24px; }
.appel p { margin: 0; color: var(--text2); }
.etapes, .piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: e; }
.piliers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etapes li, .piliers li { display: grid; gap: 6px; align-content: start; padding: 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.etapes li::before { counter-increment: e; content: counter(e); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 14px var(--f-sans); }
.etapes h3, .piliers h3 { margin: 0; font-size: 17px; }
.etapes p, .piliers p { margin: 0; color: var(--text2); font-size: 15px; }

/* ---------- formulaires ---------- */
.formulaire { display: grid; gap: 14px; max-width: 720px; }
.formulaire label { display: grid; gap: 4px; font: 500 14px var(--f-sans); color: var(--text2); }
.formulaire label.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.formulaire label.case input { margin-top: 4px; accent-color: var(--accent); }
.formulaire input, .formulaire select, .formulaire textarea { font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-s); padding: 11px 12px; }
.formulaire label.case input { padding: 0; }
.formulaire textarea { min-height: 140px; resize: vertical; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { border-color: var(--ink); outline: none; }
.formulaire .deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.formulaire .pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire fieldset { border: 1px solid var(--rule); border-radius: var(--r); padding: 16px; margin: 0; display: grid; gap: 14px; }
.formulaire legend { font-weight: 600; padding: 0 6px; }
.etat { min-height: 24px; margin: 0; }
.etat.erreur { color: var(--accent); }

/* ---------- pied ---------- */
.pied { border-top: 1px solid var(--rule); background: var(--surface); padding-block: 32px 96px; }
.pied .in { display: grid; gap: 12px; }
.pied p { margin: 0; font-size: 14px; color: var(--muted); }
.pied nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.pied a { color: var(--text2); text-decoration: none; font-size: 14px; }
.pied a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 1000px) {
  .heros .in { grid-template-columns: minmax(0, 1fr); padding-block: 40px; }
  .vitrine { display: none; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boutique, .fiche, .panier { grid-template-columns: minmax(0, 1fr); }
  .panneau { border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 16px; background: var(--surface); }
  .panneau summary { display: block; font-weight: 600; cursor: pointer; }
  .filtres { position: static; max-height: none; margin-top: 16px; }
  .encart-achat, .recap { position: static; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .entete .in { grid-template-columns: minmax(0, 1fr) auto; }
  .recherche { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .marque span { display: none; }
  .appels, .etapes, .piliers, .formulaire .deux { grid-template-columns: minmax(0, 1fr); }
  .actus li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .specs div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tuiles { grid-template-columns: minmax(0, 1fr); }
  .ligne-panier .champs { grid-template-columns: minmax(0, 1fr) 88px; }
  .ligne-panier .champs .date { grid-column: 1 / -1; }
  .outils .libelle { display: none; }
}

/* ---------- tendances ---------- */
.barres { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.barres li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 72px; gap: 4px 16px; align-items: center; }
.barres .nom { font-weight: 500; }
.barres .barre { height: 8px; background: var(--sunk); border-radius: 4px; overflow: hidden; }
.barres .barre i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; }
.barres .val { font: 600 14px var(--f-mono); text-align: right; }
.barres .mono { grid-column: 1 / -1; }
@media (max-width: 700px) { .barres li { grid-template-columns: minmax(0, 1fr) 64px; } .barres .barre { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- tiroir du panier ---------- */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(10, 10, 12, .35); }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: min(440px, 100%); display: grid; grid-template-rows: auto auto 1fr auto auto; background: var(--surface); border-left: 1px solid var(--rule); box-shadow: -12px 0 40px rgba(0,0,0,.12);
  translate: 100% 0; visibility: hidden; transition: translate .3s var(--ease), visibility .3s; padding-bottom: env(safe-area-inset-bottom, 0px); }
.tiroir.ouvert { translate: 0 0; visibility: visible; }
.tiroir-tete { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.tiroir-tete h2 { margin: 0; font-size: 18px; }
.tiroir .fermer { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.tiroir .ajoute { margin: 0; padding: 10px 20px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 14px; }
#tiroir-lignes { overflow-y: auto; padding: 8px 20px; }
.tiroir .vide { padding: 20px; margin: 0; }
.ligne-tiroir { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ligne-tiroir .sym { min-width: 44px; height: 44px; font-size: 15px; }
.ligne-tiroir a { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: none; }
.ligne-tiroir .mono { font-size: 12px; }
.ligne-tiroir .qte { display: flex; gap: 6px; margin-top: 8px; }
.ligne-tiroir input, .ligne-tiroir select { font-size: 15px; padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-s); background: var(--bg); color: var(--ink); }
.ligne-tiroir input { width: 120px; }
.ligne-tiroir .retirer { font-size: 20px; }
.tiroir-pied { display: grid; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { .tiroir { transition: none; } }

/* ---------- compte et besoin par ligne ---------- */
.compte h2 { font-size: 18px; margin: 0; }
.profil-ok { display: grid; gap: 8px; justify-items: start; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.statut { margin: 0; padding: 8px 12px; border-radius: var(--r-s); font-size: 14px; }
.statut.ok { background: #e6f0e7; color: var(--ok); } .statut.attente { background: var(--sunk); color: var(--text2); }
:root[data-theme="dark"] .statut.ok { background: #18261a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .statut.ok { background: #18261a; } }
.besoin { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.besoin legend { font: 500 13px var(--f-sans); color: var(--muted); margin-bottom: 6px; padding: 0; }
.choix { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--rule-strong); border-radius: 20px; font: 500 14px var(--f-sans); color: var(--ink); cursor: pointer; }
.choix input { accent-color: var(--accent); margin: 0; }
.choix:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.choix.off { opacity: .45; cursor: not-allowed; }
.ligne-tiroir .qte { flex-wrap: wrap; }
.ligne-tiroir .qte select[name="type"] { flex: 1 1 100%; }
#historique ul { margin: 8px 0 0; padding-left: 18px; font-size: 15px; color: var(--text2); }