/* Concord Textile brand layer — tokens from the Claude Design system
   ("concord-textile-design-system", project 93a010fa, 2026-07-22).
   Fonts: Nexa/Glacial Indifference substituted with locally hosted
   Montserrat/Poppins until licensed files arrive. Safety pictograms (CLP/GHS, red "Jamais"
   block, spec chips) are a hard product requirement and OVERRIDE any
   design iteration that drops them (Aurèle, 22.07). */
/* Local TTF sources make Chromium embed deterministic font subsets in server
   PDFs. No label render may depend on an external font request or synthesis. */
@font-face {
  font-family:'Montserrat'; font-style:normal; font-weight:300; font-display:block;
  src:url('/static/fonts/Montserrat-Light.ttf') format('truetype');
}
@font-face {
  font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:block;
  src:url('/static/fonts/Montserrat-Medium.ttf') format('truetype');
}
@font-face {
  font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:block;
  src:url('/static/fonts/Montserrat-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:block;
  src:url('/static/fonts/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
  font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:block;
  src:url('/static/fonts/Montserrat-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:block;
  src:url('/static/fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
  font-family:'Poppins'; font-style:normal; font-weight:500; font-display:block;
  src:url('/static/fonts/Poppins-Medium.ttf') format('truetype');
}
@font-face {
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:block;
  src:url('/static/fonts/Poppins-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:block;
  src:url('/static/fonts/Poppins-Bold.ttf') format('truetype');
}
@font-face {
  font-family:'Poppins'; font-style:normal; font-weight:800; font-display:block;
  src:url('/static/fonts/Poppins-ExtraBold.ttf') format('truetype');
}

:root {
  --indigo-700:#0e0c63; --indigo-500:#2a26ab; --indigo-100:#e3e2f0;
  --green-500:#97c422; --green-050:#f2f8e2;
  --blue-500:#2581c4;  --blue-050:#e8f3fb; --blue-600:#1f6fac;
  --ink-800:#2b3136; --ink-500:#6b727c; --ink-200:#dfe3e9;
  --mist:#f5f6fa; --danger-ct:#d64545; --warning-ct:#e8a723;
  --gradient-drop:linear-gradient(135deg,var(--green-500) 0%,var(--blue-500) 100%);
  --shadow-sm:0 1px 3px rgba(14,12,99,.08),0 1px 2px rgba(14,12,99,.04);
  --radius-md:10px; --radius-lg:16px;
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Poppins',system-ui,sans-serif;
}

body { font-family:var(--font-body); }
header h1 { font-family:var(--font-display); font-weight:600; letter-spacing:.01em; }
h2 { font-family:var(--font-display); font-weight:700; letter-spacing:.14em; font-size:.72rem; }

/* --- gamme navigation chips --- */
.gammes { display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.2rem; -webkit-overflow-scrolling:touch; }
.gammes button { flex:none; font:inherit; font-size:.78rem; padding:.35rem .8rem; cursor:pointer;
  border:1px solid var(--ink-200); border-radius:999px; background:#fff; color:var(--ink-800); }
.gammes button.on { background:var(--indigo-700); border-color:var(--indigo-700); color:#fff; font-weight:600; }

/* --- product list rows --- */
.ref { font-family:ui-monospace,Consolas,monospace; font-size:.72rem; background:var(--indigo-100);
  color:var(--indigo-700); border-radius:6px; padding:.05rem .4rem; font-weight:600; }
.prod-row .eco { color:var(--green-500); font-weight:700; letter-spacing:-.1em; margin-left:.3rem; }
/* packaging highlight colour — the band at the top of the fiche echoes the
   label band on the physical bidon (recognition aid, per Aurèle 22.07) */
.fiche { overflow:hidden; }
.fiche .band { height:9px; margin:-1rem -1rem .8rem; }

/* --- fiche produit --- */
.fiche { background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius-lg);
  padding:1rem; box-shadow:var(--shadow-sm); }
.fiche .name { font-family:var(--font-display); font-weight:700; color:var(--indigo-700);
  font-size:1.15rem; line-height:1.2; text-transform:uppercase; }
/* commercial names render UPPERCASE like the labels/FT; the DB keeps the
   official brand casing (ProtEx, TanEx…) as source of truth (Aurèle 24.07).
   Safe on .name/.t: the .ref chip is already uppercase and the eco pipes and
   name_full/description are separate elements. */
.prod-row .t { text-transform:uppercase; }
.fiche .full { color:var(--ink-500); font-size:.85rem; margin-top:.1rem; }
.fiche .eyebrow { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:.62rem; font-weight:700; color:var(--blue-600); margin:.8rem 0 .3rem; }

/* spec chips — the catalogue legend strip (dosage/temp/pH/actif/ADR/éco) */
.spec { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:.7rem; }
.spec > div { border:1px solid var(--ink-200); border-radius:var(--radius-md); background:var(--mist);
  padding:.4rem .3rem; text-align:center; }
.spec b { display:block; font-size:.8rem; color:var(--ink-800); }
.spec small { font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500); }

/* ✓ benefit checklist with the drop gradient */
.ct-checklist { list-style:none; padding:0; margin:.3rem 0 0; display:grid; gap:.35rem; }
.ct-checklist li { padding-left:1.5rem; position:relative; font-size:.9rem; }
.ct-checklist li::before { content:'✓'; position:absolute; left:0; top:0; width:1.05rem; height:1.05rem;
  border-radius:50%; background:var(--gradient-drop); color:#fff; font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; }

/* the red "Jamais" block — non-negotiable safety element */
.never-block { border:2px solid var(--danger-ct); border-radius:var(--radius-md);
  background:#fdf1f1; padding:.6rem .8rem; margin-top:.8rem; }
.never-block .nt { color:var(--danger-ct); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:.25rem; }
.never-block ul { padding-left:1.1rem; margin:0; display:grid; gap:.25rem; font-size:.88rem; }

.stain-chips { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem; }
.stain-chips span { background:var(--blue-050); color:var(--blue-600); border-radius:999px;
  font-size:.75rem; padding:.1rem .6rem; }

/* Vue Pro (collapsed) */
details.pro { margin-top:.8rem; border:1px solid var(--ink-200); border-radius:var(--radius-md); background:var(--mist); }
details.pro summary { cursor:pointer; padding:.6rem .8rem; font-weight:600; color:var(--indigo-700); font-size:.88rem; }
details.pro .body { padding:0 .8rem .8rem; }
details.pro table { width:100%; border-collapse:collapse; font-size:.8rem; font-variant-numeric:tabular-nums; }
details.pro th { text-align:left; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-500); padding:.25rem .3rem; border-bottom:1px solid var(--ink-200); }
details.pro td { padding:.3rem; border-bottom:1px dashed var(--ink-200); }
.conflict { background:#fff8ec; border-left:3px solid var(--warning-ct); padding:.35rem .6rem;
  font-size:.78rem; margin-top:.3rem; }

/* competitor equivalences — pro-only, validated rows only. Deliberately shows
   BOTH sides: a commercial who only knows why we win gets ambushed on the one
   thing the rival does better, so ✓ and △ always render as a pair. */
.equiv { border:1px solid var(--ink-200); border-radius:var(--radius-md); background:#fff;
  padding:.5rem .65rem; margin-top:.45rem; font-size:.82rem; }
.equiv-h { font-size:.86rem; margin-bottom:.15rem; }
.equiv-h .doc-badge { background:var(--mist); margin-left:.25rem; }
.equiv-spec { color:var(--ink-500); font-size:.76rem; margin-bottom:.3rem; }
.equiv-win { color:var(--indigo-700); margin-top:.2rem; }
.equiv-lose { color:var(--warning-ct); margin-top:.2rem; }
.equiv .doc-link { margin-top:.4rem; font-size:.72rem; padding:.25rem .5rem; }
.equiv-q { width:100%; padding:.6rem .8rem; font-size:.95rem; border:1px solid var(--ink-200);
  border-radius:var(--radius-md); margin-bottom:.7rem; }
.equiv-to { font-family:var(--font-display); color:var(--indigo-700); font-weight:700; }

/* fiche header swish — the REAL label artwork (/static/swish.webp, extracted
   from the 2026 label PDFs) as a zero-space translucent BACKGROUND, tinted by
   the packaging colour via CSS mask. Renders only when the product has one. */
.fiche { position:relative; z-index:0; }
.fiche .swish-bg { position:absolute; top:0; left:0; right:0; height:170px;
  z-index:-1; opacity:.34; pointer-events:none;
  -webkit-mask-image:url(/static/swish.webp); mask-image:url(/static/swish.webp);
  -webkit-mask-size:cover; mask-size:cover;
  -webkit-mask-position:center top; mask-position:center top;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }

/* fiche v3 — GHS pictograms, accordions, dosage table, conditionnements */
.ghs-row { display:flex; align-items:flex-start; gap:.55rem; margin-top:.8rem; flex-wrap:wrap; }
.ghs { display:inline-flex; flex-direction:column; align-items:center; gap:.15rem; width:56px; }
.ghs svg, .ghs img { width:44px; height:44px; }
.ghs small { font-size:.52rem; text-align:center; line-height:1.15; color:var(--ink-500); }
.signal { align-self:center; font-weight:800; font-size:.78rem; letter-spacing:.06em;
  padding:.25rem .6rem; border-radius:.4rem; background:#fff3cd; color:#8a6d00; }
.signal.danger { background:#fde8e8; color:#b91c1c; }
details.sec { border:1px solid var(--ink-200); border-radius:.7rem; margin-top:.6rem; background:#fff; }
details.sec summary { cursor:pointer; padding:.6rem .8rem; font-weight:600; font-size:.88rem;
  color:var(--indigo-700); }
details.sec .body { padding:0 .8rem .8rem; font-size:.88rem; }
table.dose { border-collapse:collapse; width:100%; margin:.3rem 0 .5rem; font-size:.85rem; }
table.dose th, table.dose td { border:1px solid var(--ink-200); padding:.35rem .5rem; text-align:center; }
table.dose th { background:var(--indigo-100); color:var(--indigo-700); font-size:.72rem; }
table.dose th small { display:block; font-size:.6rem; font-weight:600; }
ol.steps { padding-left:1.2rem; display:grid; gap:.3rem; font-size:.9rem; margin:.3rem 0; }
ul.notes { padding-left:1.1rem; display:grid; gap:.25rem; font-size:.85rem; margin:.3rem 0; }
.phr { font-size:.82rem; margin:.18rem 0; }
.phr b { font-family:ui-monospace,Consolas,monospace; font-size:.75rem; color:var(--indigo-700); }

/* generated danger label — multilingual warning box derived from CLP codes */
.dl-langs { display:flex; gap:.3rem; margin:.1rem 0 .6rem; }
.dl-lang { border:1px solid var(--ink-200); background:#fff; color:var(--ink-500);
  border-radius:.5rem; padding:.2rem .55rem; font-size:.72rem; font-weight:700;
  letter-spacing:.05em; cursor:pointer; }
.dl-lang.on { background:var(--indigo-700); color:#fff; border-color:var(--indigo-700); }
.danger-label { border:1px solid var(--ink-200); border-radius:.6rem; padding:.6rem .7rem; background:var(--mist); }
.danger-label .dl-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.4rem; }
.dl-list { display:grid; gap:.1rem; }
.dl-list.dl-p { margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--ink-200); }
.dl-note { font-size:.72rem; color:var(--ink-500); margin-top:.5rem; font-style:italic; }
.pack-grid { display:flex; flex-wrap:wrap; gap:.45rem; }
.pack { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--ink-200);
  border-radius:.6rem; padding:.35rem .6rem; font-size:.82rem; }

/* fiche documents — proper names + filetype badge (FT/FDS deep links) */
.doc-links { display:flex; flex-wrap:wrap; gap:.45rem; }
.doc-link { display:inline-flex; align-items:center; gap:.4rem; background:var(--indigo-100);
  color:var(--indigo-700); border-radius:.6rem; font-size:.82rem; font-weight:600;
  padding:.42rem .7rem; text-decoration:none; }
.doc-link svg { flex:none; }
.doc-badge { font-size:.62rem; font-weight:700; letter-spacing:.04em; background:#fff;
  border-radius:.3rem; padding:.1rem .32rem; }