/* ══════════════════════════════════════════════════════════════════════════════════
   Catalogue — feuille de style.

   Extraite du bloc <style> de templates/catalog.jinja2. Écrite en LESS et compilée en
   .css par le file watcher PyCharm : ne jamais éditer catalog.css à la main.

   ⚠️ Toute modification doit être reportée à l'identique dans le bloc <style> de
   templates/catalog.html, copie autonome où tout le code reste réuni.
   ══════════════════════════════════════════════════════════════════════════════════ */
/* ============================ Fondations ============================ */
:root {
  --bordeaux: #7B0E3B;
  --bordeaux-clair: #A81157;
  --bordeaux-fonce: #560826;
  --encre: #1B1418;
  --encre-doux: #4A4046;
  --gris: #7C7178;
  --creme: #FBF8F6;
  --creme-2: #F4EEEA;
  --ligne: #E4DAD3;
  --blanc: #FFFFFF;
  --or: #A8853F;
  --vert: #3F6B2B;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 14px;
  --ombre: 0 1px 2px rgba(27, 20, 24, 0.04), 0 8px 28px rgba(27, 20, 24, 0.06);
  --ombre-forte: 0 24px 70px rgba(27, 20, 24, 0.18);
  --max: 1280px;
}
* {
  box-sizing: border-box;
}
/* overflow-anchor:none posé ici ET sur body : c'est <html> (pas <body>) qui est le
   conteneur de défilement réel de la page (document.scrollingElement) tant qu'aucun des
   deux ne fixe overflow-x/y, et cette propriété ne se propage pas de body vers lui comme
   le fait overflow-x/y — la poser seulement sur body laisse le vrai scroller en overflow-
   anchor:auto. cf. CLAUDE.md, section catalogue, pour le diagnostic complet. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 142px;
  overflow-anchor: none;
}
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-anchor: none;
}
/* height:auto est indispensable : sans lui, max-width écrase l'image au lieu de la réduire. */
img {
  max-width: 100%;
  display: block;
  height: auto;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
}
h2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}
h3 {
  font-size: 1.22rem;
}
p {
  margin: 0 0 1em;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* ============================ Barre supérieure ============================ */
.topbar {
  background: var(--encre);
  color: #E9E1E5;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.topbar .wrap {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  flex-wrap: wrap;
}
.topbar span {
  opacity: 0.82;
}
.topbar b {
  font-weight: 600;
  opacity: 1;
  color: #fff;
}
.topbar a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
}
.topbar a:hover {
  border-bottom-style: solid;
}
.pied-acc {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pied-acc img {
  height: 34px;
  width: auto;
  flex: 0 0 auto;
  background: #fff;
  padding: 3px;
  border-radius: 5px;
}
.pied-acc a {
  color: inherit;
  text-decoration: underline;
}
.topbar .cofrac-mini {
  height: 17px;
  width: auto;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 6px;
  filter: brightness(0) invert(1);
}
.topbar .cofrac {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bordeaux-clair);
  display: inline-block;
}
/* ============================ En-tête ============================ */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 248, 246, 0.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ligne);
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand img {
  width: 172px;
}
nav.main {
  display: flex;
  gap: 20px;
  margin-left: auto;
  align-items: center;
  min-width: 0;
}
nav.main a {
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--encre-doux);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: 0.18s;
  white-space: nowrap;
}
nav.main a:hover {
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}
.hdr-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: 0.18s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--bordeaux);
  color: #fff;
}
/* L'en-tête est clair : fond bordeaux plein, texte blanc, quelle que soit la cascade. */
header.site .hdr-actions .btn-primary,
header.site .hdr-actions .btn-primary:link,
header.site .hdr-actions .btn-primary:visited {
  background: var(--bordeaux);
  color: #fff;
  border-color: var(--bordeaux);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(27, 20, 24, 0.16);
}
header.site .hdr-actions .btn-primary:hover {
  background: var(--bordeaux-clair);
  color: #fff;
  border-color: var(--bordeaux-clair);
}
header.site .hdr-actions .btn-ghost {
  color: var(--encre);
  background: var(--blanc);
  border-color: var(--ligne);
}
header.site .hdr-actions .btn-ghost:hover {
  border-color: var(--bordeaux);
  color: var(--bordeaux);
}
.btn-primary:hover {
  background: var(--bordeaux-fonce);
}
.btn-ghost {
  background: transparent;
  border-color: var(--ligne);
  color: var(--encre);
}
.btn-ghost:hover {
  border-color: var(--bordeaux);
  color: var(--bordeaux);
}
/* Bouton de confort du mode développement : volontairement terne, pour qu'on ne le confonde
   pas une seconde avec une action du parcours client. */
.btn-dev {
  background: var(--gris);
  border-color: var(--gris);
  color: #fff;
  font-weight: 500;
}
.btn-dev:hover {
  background: var(--encre);
  border-color: var(--encre);
}
.btn-light {
  background: #fff;
  color: var(--bordeaux);
  border-color: var(--ligne);
}
.btn-light:hover {
  border-color: var(--bordeaux);
}
.btn-sm {
  padding: 8px 15px;
  font-size: 0.82rem;
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cart-btn {
  position: relative;
}
.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  background: var(--bordeaux-clair);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid var(--creme);
}
.burger {
  display: none;
  background: none;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
}
/* ============================ Héros ============================ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--encre);
  color: #F6F0F2;
}
.hero-photo {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  filter: saturate(0.72) contrast(1.04);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(19, 14, 17, 0.95) 0%, rgba(19, 14, 17, 0.86) 42%, rgba(19, 14, 17, 0.74) 100%), radial-gradient(900px 520px at 78% 12%, rgba(168, 17, 87, 0.42), transparent 62%), radial-gradient(700px 460px at 8% 88%, rgba(123, 14, 59, 0.34), transparent 60%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
}
.hero .wrap {
  position: relative;
  padding: 60px 28px 64px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 52px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #F0C3D6;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--bordeaux-clair);
}
.hero h1 {
  color: #fff;
}
.hero h1 em {
  font-style: italic;
  color: #F3AECB;
}
.hero .lead {
  font-size: 1.02rem;
  color: #DDCFD6;
  max-width: 54ch;
  margin-top: 18px;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}
/* Sur fond sombre, le bordeaux ne se détache pas : l'action principale passe en blanc. */
.hero .btn-primary,
.une-h-cta .btn-primary {
  background: #fff;
  color: var(--bordeaux);
  border-color: #fff;
}
.hero .btn-primary:hover,
.une-h-cta .btn-primary:hover {
  background: #F7D9E6;
  color: var(--bordeaux-fonce);
  border-color: #F7D9E6;
}
.hero-cta .btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.hero-cta .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.hero-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 30px;
  backdrop-filter: blur(8px);
}
.hero-card h3 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.kpi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
}
.kpi div {
  background: #221A1E;
  padding: 20px 18px;
}
.kpi b {
  display: block;
  font-family: var(--serif);
  font-size: 1.9rem;
  color: #fff;
  line-height: 1;
}
.kpi span {
  font-size: 0.76rem;
  color: #C6B4BC;
  letter-spacing: 0.04em;
  display: block;
  margin-top: 7px;
}
.hero-note {
  font-size: 0.78rem;
  color: #B9A7AF;
  margin-top: 18px;
  line-height: 1.5;
}
/* ============================ Bandeau de recherche ============================ */
.hdr-search {
  position: relative;
  width: 100%;
}
.hdr-search .field {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 11px 22px;
  transition: 0.18s;
  color: var(--gris);
}
.hdr-search .field:focus-within {
  border-color: var(--bordeaux);
  background: var(--blanc);
  box-shadow: 0 0 0 3px rgba(123, 14, 59, 0.09);
}
.hdr-search input {
  border: 0;
  background: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 0.96rem;
  color: var(--encre);
}
.hdr-search input::placeholder {
  color: var(--gris);
}
.hdr-search .rm {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--gris);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  text-decoration: none;
}
.hdr-search .rm:hover {
  color: var(--bordeaux);
}
/* Bouton de réouverture du panneau IA, sous le champ #q — distinct de l'entrée .ac-item-ai
   (qui, elle, lance une NOUVELLE recherche) : celui-ci ne fait que rouvrir la conversation
   déjà entamée pour la session en cours. Masqué tant qu'aucun échange n'a eu lieu (cf.
   ai_search.js, revealAiSearchReopen()) — rien à revoir avant la première question posée. */
.ai-search-reopen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 14px;
  background: none;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--gris);
}
.ai-search-reopen:hover {
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}
/* Bande de raccourcis, sous le héros */
.quickbar {
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
  padding: 14px 0;
}
/* Suggestions de recherche */
.ac-host {
  position: relative;
}
.ac {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(760px, 92vw);
  z-index: 80;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 16px;
  box-shadow: var(--ombre-forte);
  overflow: hidden;
  display: none;
  max-height: 396px;
  overflow-y: auto;
}
.ac.on {
  display: block;
}
.ac .hd {
  padding: 9px 20px 6px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 700;
  background: var(--creme);
  border-bottom: 1px solid var(--ligne);
}
.ac-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 11px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--ligne);
  text-align: left;
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.ac-item:last-child {
  border-bottom: 0;
}
.ac-item:hover,
.ac-item.sel {
  background: var(--creme);
}
.ac-item .tv {
  width: 52px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--creme-2);
}
.ac-item .tv img,
.ac-item .tv svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-item .tx {
  min-width: 0;
  flex: 1;
}
.ac-item .tx b {
  display: block;
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
}
.ac-item .tx span {
  font-size: 0.76rem;
  color: var(--gris);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-item mark {
  background: #FBE3ED;
  color: var(--bordeaux);
  padding: 0 1px;
  border-radius: 3px;
}
.ac-item .go {
  font-size: 0.72rem;
  color: var(--bordeaux);
  font-weight: 700;
  flex: 0 0 auto;
}
.ac .all {
  padding: 12px 20px;
  font-size: 0.82rem;
  color: var(--bordeaux);
  font-weight: 600;
  cursor: pointer;
  background: var(--creme);
  border: 0;
  width: 100%;
  text-align: left;
}
.ac .all:hover {
  background: var(--creme-2);
}
.ac .none {
  padding: 22px 20px;
  font-size: 0.86rem;
  color: var(--gris);
}
/* Option IA, dernière de la liste #ac (cf. catalogue.js, suggest()) : fond teinté même
   au repos pour se distinguer d'une prestation, sans dupliquer .ac-item (tv/tx/go, bordure). */
.ac-item-ai {
  background: var(--creme);
  border-top: 1px solid var(--ligne);
}
.ac-item-ai:hover,
.ac-item-ai.sel {
  background: var(--creme-2);
}
.ac-ai-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
}
.quick span {
  font-size: 0.78rem;
  color: var(--gris);
  margin-right: 2px;
}
.quick button {
  background: none;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.78rem;
  color: var(--encre-doux);
  cursor: pointer;
  transition: 0.16s;
}
.quick button:hover {
  border-color: var(--bordeaux);
  color: var(--bordeaux);
  background: #fff;
}
/* ============================ Sections ============================ */
section {
  padding: 82px 0;
}
section.tight {
  padding: 56px 0;
}
.sec-head {
  max-width: 760px;
  margin-bottom: 44px;
}
.sec-head .eyebrow {
  color: var(--bordeaux);
}
.sec-head .eyebrow::before {
  background: var(--bordeaux);
}
.sec-head p {
  color: var(--encre-doux);
  font-size: 1.05rem;
  margin-top: 16px;
}
.alt {
  background: var(--blanc);
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
/* Familles */
.fams {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.fam {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: 26px 24px 24px;
  cursor: pointer;
  transition: 0.2s;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.fam::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c, var(--bordeaux));
  opacity: 0.85;
}
.fam:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre);
  border-color: transparent;
}
.fam .ico {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  display: block;
}
.fam .ico img,
.fam .ico svg {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.fam .num {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--gris);
  font-weight: 700;
}
.fam h3 {
  margin: 12px 0 8px;
  font-size: 1.12rem;
}
.fam p {
  font-size: 0.86rem;
  color: var(--encre-doux);
  margin: 0;
  line-height: 1.55;
}
.fam .cnt {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--c, var(--bordeaux));
  font-weight: 700;
}
/* ============================ Catalogue ============================ */
.cat-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 38px;
  align-items: start;
}
.filters {
  position: sticky;
  top: 230px;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: 22px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.filters::-webkit-scrollbar {
  width: 9px;
}
.filters::-webkit-scrollbar-thumb {
  background: var(--ligne);
  border-radius: 9px;
  border: 3px solid var(--blanc);
}
.filters::-webkit-scrollbar-thumb:hover {
  background: #CDBDB3;
}
.fgroup {
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--ligne);
}
.fgroup:last-child {
  border: 0;
  margin: 0;
  padding: 0;
}
.fgroup h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 12px;
  font-weight: 700;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--encre-doux);
  line-height: 1.4;
}
.check input {
  margin: 3px 0 0;
  accent-color: var(--bordeaux);
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.check:hover {
  color: var(--bordeaux);
}
.check .n {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--gris);
}
.filters .reset {
  width: 100%;
  margin-top: 18px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.toolbar .count {
  font-size: 0.88rem;
  color: var(--encre-doux);
}
.toolbar .count b {
  color: var(--encre);
  font-weight: 700;
}
.toolbar select {
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 8px 15px;
  background: var(--blanc);
  font-size: 0.84rem;
  cursor: pointer;
  outline: none;
}
.toolbar .spacer {
  flex: 1;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.card {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  transition: 0.18s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: var(--bordeaux);
  box-shadow: var(--ombre);
  transform: translateY(-2px);
}
.card .body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Choix de méthode : un même paramètre, plusieurs façons de le doser */
.meth {
  background: var(--creme-2);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--or);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px 0;
}
.meth > b {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  margin-bottom: 4px;
}
.meth-i {
  font-size: 0.82rem;
  color: var(--encre-doux);
  margin: 0 0 12px;
}
.meth-l {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: 0.16s;
}
.meth-l:last-child {
  margin-bottom: 0;
}
.meth-l:hover {
  border-color: var(--or);
}
.meth-l:has(input:checked) {
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 2px rgba(123, 14, 59, 0.1);
}
.meth-l input {
  accent-color: var(--bordeaux);
  margin-top: 3px;
  flex: 0 0 auto;
}
.meth-t {
  flex: 1;
  min-width: 0;
}
.meth-t b {
  display: block;
  font-size: 0.9rem;
}
.meth-t span {
  display: block;
  font-size: 0.8rem;
  color: var(--encre-doux);
  margin-top: 2px;
}
.meth-p {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bordeaux);
  white-space: nowrap;
}
.meth-p span {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--gris);
  margin-top: 2px;
}
.meth-sel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.meth-sel > span {
  font-size: 0.74rem;
  color: var(--gris);
}
.meth-sel select {
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.78rem;
  background: var(--blanc);
  max-width: 230px;
}
/* ============================ Accès client ============================ */
/* La fenêtre de connexion n'a pas de pied : le corps porte lui-même sa respiration. */
#ovLogin .modal-body {
  padding: 26px 32px 30px;
}
#ovLogin .form-grid {
  gap: 12px;
}
#ovLogin label.field-l {
  margin-bottom: 16px;
}
#ovLogin .btn {
  margin-top: 4px;
}
/* Code à six chiffres : une case par chiffre, saisie pilotée par wireTfaBoxes() */
.tfa-code {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.tfa-digit {
  width: 2.6em;
  height: 3.2em;
  padding: 0;
  text-align: center;
  font-size: 1.3rem;
  color: var(--bordeaux);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 10px;
}
.tfa-digit:focus {
  outline: none;
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 3px rgba(123, 14, 59, 0.16);
}
.auth-qui {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
  max-width: 190px;
}
.auth-qui b {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-qui span {
  font-size: 0.7rem;
  color: var(--gris);
}
.auth-site {
  font-size: 0.64rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.auth-client {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 3px;
}
.auth-client .auth-client-nom {
  font-size: 0.72rem;
  color: var(--bordeaux);
  font-weight: 600;
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-client a {
  font-size: 0.66rem;
  color: var(--gris);
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 1px;
}
.auth-client a:hover {
  color: var(--bordeaux);
}
.client-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 4px;
  max-height: 46vh;
  overflow-y: auto;
}
.client-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  width: 100%;
  border: 1px solid var(--ligne);
  background: var(--blanc);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.client-item:hover {
  border-color: var(--bordeaux);
  background: var(--creme-2);
}
.client-item.on {
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 2px rgba(123, 14, 59, 0.14);
}
.client-item b {
  font-size: 0.9rem;
  font-weight: 700;
}
.client-item span {
  font-size: 0.74rem;
  color: var(--gris);
}
.client-search {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
}
.client-search:focus {
  border-color: var(--bordeaux);
}
.client-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  min-height: 1px;
}
.client-pagination:empty {
  display: none;
}
.client-page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ligne);
  background: var(--blanc);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--bordeaux);
  transition: 0.15s;
}
.client-page-btn:hover:not(:disabled) {
  background: var(--bordeaux);
  color: #fff;
  border-color: var(--bordeaux);
}
.client-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.client-page-info {
  font-size: 0.78rem;
  color: var(--gris);
  white-space: nowrap;
}
.auth-onglets {
  display: flex;
  gap: 2px;
  background: var(--ligne);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 22px;
}
.auth-onglets button {
  flex: 1;
  border: none;
  background: var(--creme-2);
  padding: 13px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--encre-doux);
  transition: 0.16s;
  line-height: 1.3;
}
.auth-onglets button:hover {
  background: var(--creme);
}
.auth-onglets button.on {
  background: var(--bordeaux);
  color: #fff;
}
.auth-intro {
  font-size: 0.88rem;
  color: var(--encre-doux);
  margin-bottom: 18px;
}
.auth-aide {
  font-size: 0.78rem;
  color: var(--gris);
  margin: 14px 0 0;
  text-align: center;
}
.auth-aide a {
  color: var(--bordeaux);
}
.lien-discret {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--bordeaux);
  cursor: pointer;
  text-decoration: underline;
}
.auth-avert {
  background: #FDF6E7;
  border: 1px solid #E8D5A8;
  border-left: 3px solid var(--or);
  padding: 12px 15px;
  font-size: 0.82rem;
  margin-bottom: 18px;
  color: #5B4A22;
}
.auth-avert b {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.auth-msg {
  display: none;
  background: #FCF1F1;
  border: 1px solid #E6C6C6;
  color: #B02020;
  padding: 11px 14px;
  font-size: 0.84rem;
  border-radius: 10px;
  margin-bottom: 14px;
}
.auth-msg.on {
  display: block;
}
/* Le tarif ne s'affiche qu'à une personne identifiée */
.prix-verrou {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bordeaux);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prix-verrou:hover {
  color: var(--bordeaux-fonce);
}
/* Même principe que .prix-verrou, mais pour les zones trop étroites pour un bouton :
   fiche de prestation (méthode, code article), boutons de site. */
.bs-connect {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.bandeau-auth {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--creme-2);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--bordeaux);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.86rem;
}
.bandeau-auth b {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
}
.bandeau-auth .spacer {
  flex: 1;
}
/* Produit de présentation : un article spécialisé, ou plusieurs réunis */
.prod-tag {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  background: var(--or);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
}
.compo {
  background: var(--creme-2);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--or);
  padding: 14px 17px;
  margin: 18px 0;
}
.compo > b {
  display: block;
  font-family: var(--serif);
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.compo ul {
  margin: 0;
  padding-left: 18px;
}
.compo li {
  font-size: 0.85rem;
  color: var(--encre-doux);
  margin-bottom: 4px;
}
.compo li code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--bordeaux);
  font-weight: 600;
}
.compo .note {
  font-size: 0.78rem;
  color: var(--gris);
  margin: 9px 0 0;
}
.top-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  background: var(--vert);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.auto-tag {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  background: var(--gris);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.auto-encart {
  background: var(--creme-2);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--gris);
  padding: 14px 17px;
  font-size: 0.85rem;
  color: var(--encre-doux);
  margin-bottom: 20px;
}
.auto-encart b {
  display: block;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--encre);
  margin-bottom: 4px;
}
.auto-encart code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--bordeaux);
  font-weight: 600;
}
.tm-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  background: #2C5565;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
}
.btn-tm {
  background: #2C5565;
  color: #fff;
  border-color: #2C5565;
}
.btn-tm:hover {
  background: #3E6E82;
  border-color: #3E6E82;
  color: #fff;
}
.tm-encart {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #EAF0F3;
  border: 1px solid #BFD2DA;
  border-left: 3px solid #2C5565;
  padding: 14px 17px;
  font-size: 0.85rem;
  color: #1E3B47;
  margin-bottom: 20px;
}
.tm-encart b {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 3px;
  color: #2C5565;
}
.tm-encart a {
  color: #2C5565;
  font-weight: 700;
}
.thumb {
  height: 132px;
  overflow: hidden;
  background: var(--creme-2);
  border-bottom: 1px solid var(--ligne);
  position: relative;
}
.thumb img,
.thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card:hover .thumb img {
  transform: scale(1.04);
}
.thumb img {
  transition: transform 0.45s ease;
}
.card .top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  background: var(--creme-2);
  color: var(--bordeaux);
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}
.card h3 {
  font-size: 1.02rem;
  line-height: 1.3;
  margin-bottom: 8px;
}
.card .desc {
  font-size: 0.845rem;
  color: var(--encre-doux);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.chip {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ligne);
  color: var(--encre-doux);
  background: var(--creme);
  white-space: nowrap;
}
.chip.acc {
  border-color: #CFE0CB;
  background: #F1F7EF;
  color: var(--vert);
  font-weight: 600;
}
.chip.time {
  border-color: #E3D3DB;
  background: #FBF1F5;
  color: var(--bordeaux);
}
/* ============================ Marque d'accréditation ============================ */
/* Toutes les occurrences du logo passent par .cofrac-img : hauteur imposée,
   largeur automatique, aucun décalage de ligne de base. */
.cofrac-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex: 0 0 auto;
}
.cofrac-img img {
  display: block;
  width: auto;
  height: 100%;
}
.cofrac-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 7px 13px 7px 10px;
  background: #fff;
  max-width: 100%;
}
.cofrac-chip .cofrac-img {
  height: 28px;
}
.cofrac-chip b {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--encre-doux);
  line-height: 1.25;
}
.cofrac-chip:hover {
  border-color: var(--bordeaux);
}
.cofrac-chip b a,
.cofrac-bloc b a {
  color: var(--bordeaux);
  text-decoration: none;
  border-bottom: 1px dotted var(--bordeaux);
  white-space: nowrap;
}
.cofrac-chip b a:hover,
.cofrac-bloc b a:hover {
  border-bottom-style: solid;
}
.cofrac-bloc {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 22px 0 0;
  border: 1px solid var(--ligne);
  border-left: 3px solid #C8102E;
  border-radius: 0 12px 12px 0;
  padding: 18px 20px;
  background: #fff;
}
.cofrac-bloc .cofrac-img {
  height: 62px;
  margin-top: 2px;
}
.cofrac-bloc > div {
  min-width: 0;
}
.cofrac-bloc b {
  display: block;
  font-size: 0.88rem;
  color: var(--encre);
  letter-spacing: 0.02em;
}
.cofrac-bloc b.in {
  display: inline;
  color: var(--bordeaux);
}
.cofrac-bloc span {
  display: block;
  font-size: 0.85rem;
  color: var(--encre-doux);
  margin-top: 6px;
  line-height: 1.5;
}
.cofrac-bloc .sml {
  font-size: 0.75rem;
  color: var(--gris);
  margin-top: 9px;
  line-height: 1.5;
}
.acc-inline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.acc-inline .cofrac-img {
  height: 26px;
}
.cofrac-img.acc-mini {
  height: 26px;
  margin-left: 10px;
  vertical-align: middle;
}
.acc-grid > .cofrac-img {
  height: 96px;
  align-items: flex-start;
  margin-top: 16px;
}
.perf th.acc-col,
.perf td.acc-col {
  width: 52px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.perf td.acc-col {
  vertical-align: middle;
}
.perf td.acc-col .cofrac-img {
  height: 26px;
}
.perf .acc-non {
  color: var(--ligne);
  font-weight: 700;
}
/* Contexte « site retenu » */
.site-hint {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--creme);
  font-size: 0.74rem;
  color: var(--gris);
  line-height: 1.45;
  border: 1px solid var(--ligne);
}
.site-hint.on {
  background: #FBF1F5;
  border-color: #E9D2DD;
  color: var(--bordeaux-fonce);
}
.site-hint b {
  color: var(--bordeaux);
}
.site-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--creme-2);
  color: var(--bordeaux);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.cofrac-chip.hors {
  border-style: dashed;
  background: var(--creme);
}
.cofrac-chip.hors b {
  color: var(--gris);
  font-weight: 600;
}
.cofrac-bloc.hors {
  border-left-color: var(--ligne);
  background: var(--creme);
}
.cofrac-bloc.hors b {
  color: var(--gris);
}
.site-note {
  display: block;
  font-size: 0.78rem;
  color: var(--bordeaux);
  margin-top: 8px;
  font-weight: 600;
}
b.site-on {
  color: var(--bordeaux);
}
.perf caption .cap-acc {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  vertical-align: 2px;
}
.card .foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ligne);
}
.price {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--encre);
}
.price.devis {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--gris);
  font-style: italic;
}
.card .foot .btn {
  margin-left: auto;
}
.empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--gris);
}
.empty h3 {
  color: var(--encre);
  margin-bottom: 10px;
}
/* ============================ Étapes de commande ============================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  counter-reset: s;
}
.step {
  position: relative;
  padding-top: 34px;
}
.step::before {
  counter-increment: s;
  content: counter(s);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--bordeaux);
  width: 44px;
  height: 44px;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blanc);
}
.step {
  padding-left: 60px;
  padding-top: 8px;
}
.step h3 {
  font-size: 1.04rem;
  margin-bottom: 8px;
}
.step p {
  font-size: 0.86rem;
  color: var(--encre-doux);
  margin: 0;
}
/* ============================ Expertise ============================ */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.prose p {
  color: var(--encre-doux);
  font-size: 1.02rem;
}
.prose h3 {
  margin: 30px 0 10px;
}
.panel {
  background: var(--creme-2);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: 28px;
}
.panel h3 {
  margin-bottom: 16px;
}
.panel ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
  color: var(--encre-doux);
}
.panel li {
  margin-bottom: 9px;
}
.acc-grid {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}
.acc-grid > img {
  width: 82px;
  height: auto;
  margin-top: 14px;
}
.acc-grid .badge-acc:first-child {
  margin-top: 0;
}
.badge-acc {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 18px;
  text-decoration: none;
  transition: 0.16s;
}
a.badge-acc:hover {
  border-color: var(--bordeaux);
  box-shadow: var(--ombre);
}
a.badge-acc:hover span {
  color: var(--bordeaux);
}
.badge-acc .sq {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--bordeaux);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 700;
  flex: 0 0 auto;
  text-align: center;
  line-height: 1.1;
}
.badge-acc b {
  display: block;
  font-size: 0.9rem;
}
.badge-acc span {
  font-size: 0.8rem;
  color: var(--gris);
}
/* Sites */
.sites {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.site {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: 28px;
}
.site .dep {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--bordeaux);
  font-weight: 700;
}
.site h3 {
  margin: 10px 0 14px;
}
.site address {
  font-style: normal;
  font-size: 0.9rem;
  color: var(--encre-doux);
  line-height: 1.7;
}
.site a {
  color: var(--bordeaux);
  text-decoration: none;
}
.site a:hover {
  text-decoration: underline;
}
.site .hours {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ligne);
  font-size: 0.82rem;
  color: var(--gris);
}
/* Équipe */
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
  margin-top: 8px;
}
.team div {
  display: flex;
  gap: 12px;
  font-size: 0.9rem;
  padding: 9px 0;
  border-bottom: 1px solid var(--ligne);
}
.team b {
  flex: 0 0 auto;
  font-weight: 600;
}
.team span {
  color: var(--encre-doux);
}
/* Accordéon */
.acc {
  border-top: 1px solid var(--ligne);
}
.acc details {
  border-bottom: 1px solid var(--ligne);
}
.acc summary {
  cursor: pointer;
  padding: 20px 44px 20px 0;
  font-family: var(--serif);
  font-size: 1.06rem;
  position: relative;
  list-style: none;
  transition: 0.16s;
}
.acc summary::-webkit-details-marker {
  display: none;
}
.acc summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 18px;
  font-size: 1.4rem;
  color: var(--bordeaux);
  font-family: var(--sans);
  transition: 0.2s;
}
.acc details[open] summary::after {
  content: "−";
}
.acc summary:hover {
  color: var(--bordeaux);
}
.acc .body {
  padding: 0 44px 24px 0;
  font-size: 0.92rem;
  color: var(--encre-doux);
}
.acc .body p:last-child {
  margin-bottom: 0;
}
.acc .body ul {
  padding-left: 20px;
}
/* ============================ Pied de page ============================ */
footer.site {
  background: var(--encre);
  color: #CDBFC6;
  padding: 64px 0 28px;
  font-size: 0.88rem;
}
footer.site .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 44px;
}
footer.site h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
  font-weight: 700;
}
footer.site a {
  color: #CDBFC6;
  text-decoration: none;
  display: block;
  padding: 4px 0;
}
footer.site a:hover {
  color: #fff;
}
.footlogo {
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  display: inline-block;
  margin-bottom: 18px;
}
.footlogo img {
  width: 184px;
}
footer .bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #9C8E95;
}
/* ============================ Fiches techniques ============================ */
.chip.doc {
  border-color: #D9CBE2;
  background: #F7F1FA;
  color: #6B4A80;
  font-weight: 600;
}
.doc-bloc {
  margin: 22px 0 0;
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--creme);
}
.doc-bloc > b {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 10px;
}
.doc-bloc.accomp {
  margin-top: 12px;
  background: #FBF1F5;
  border-color: #E9D2DD;
}
.doc-bloc.accomp .doc-ico {
  background: var(--encre);
}
.doc-liste {
  margin-top: 14px;
}
.doc-lien.absent {
  cursor: default;
  opacity: 0.62;
  border-style: dashed;
}
.doc-lien.absent:hover {
  border-color: var(--ligne);
  background: transparent;
}
.doc-lien.absent .doc-go {
  color: var(--gris);
  font-weight: 400;
  font-style: italic;
}
.doc-lien {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  margin-top: 7px;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  text-decoration: none;
  transition: 0.16s;
}
.doc-lien:first-child {
  margin-top: 0;
}
.doc-lien:hover {
  border-color: var(--bordeaux);
  box-shadow: var(--ombre);
}
.doc-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 44px;
  border-radius: 5px;
  background: var(--bordeaux);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.doc-tx {
  flex: 1;
  min-width: 0;
}
.doc-tx b {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--encre);
  line-height: 1.3;
}
.doc-tx span {
  display: block;
  font-size: 0.72rem;
  color: var(--gris);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-go {
  flex: 0 0 auto;
  font-size: 0.74rem;
  color: var(--bordeaux);
  font-weight: 700;
}
/* ============================ À la une, dans le héros ============================ */
.une-hero {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 20px;
  padding: 22px;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
}
.une-h-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.une-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bordeaux-clair);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.une-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
}
.une-h-per {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C6B4BC;
  font-weight: 700;
}
.une-h-vis {
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: #221A1E;
  margin-bottom: 16px;
}
.une-h-vis img,
.une-h-vis svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.une-hero h3 {
  font-size: 1.24rem;
  color: #fff;
  line-height: 1.22;
  margin-bottom: 9px;
}
.une-hero p {
  font-size: 0.86rem;
  color: #DDCFD6;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.une-h-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  overflow: hidden;
  margin: 0 0 16px;
}
.une-h-facts div {
  background: #221A1E;
  padding: 11px 13px;
}
.une-h-facts dt {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9C8E95;
  font-weight: 700;
}
.une-h-facts dd {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #fff;
  line-height: 1.3;
}
.une-h-cta {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: auto;
}
.une-h-cta .btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.une-h-cta .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
/* Accès direct à la fiche technique, dans le premier écran */
.une-h-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 11px;
  text-decoration: none;
  transition: 0.16s;
}
.une-h-doc:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}
.une-h-doc .d-ico {
  flex: 0 0 auto;
  width: 32px;
  height: 38px;
  border-radius: 5px;
  background: #fff;
  color: var(--bordeaux);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.une-h-doc .d-tx {
  min-width: 0;
  flex: 1;
}
.une-h-doc .d-tx b {
  display: block;
  font-size: 0.82rem;
  color: #fff;
  font-weight: 600;
  line-height: 1.25;
}
.une-h-doc .d-tx span {
  display: block;
  font-size: 0.72rem;
  color: #C6B4BC;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.une-h-doc .d-go {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: #F3AECB;
  font-weight: 700;
  white-space: nowrap;
}
/* ============================ Chiffres clés ============================ */
.kpi-strip {
  background: var(--encre);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.kpi-strip .wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.kpi-strip div {
  padding: 22px 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.kpi-strip div:first-child {
  border-left: 0;
  padding-left: 0;
}
.kpi-strip b {
  display: block;
  font-family: var(--serif);
  font-size: 1.75rem;
  color: #fff;
  line-height: 1;
}
.kpi-strip span {
  display: block;
  font-size: 0.73rem;
  color: #B9A7AF;
  letter-spacing: 0.03em;
  margin-top: 6px;
}
/* ============================ Illustrations ============================ */
figure {
  margin: 0;
}
.fig {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--creme-2);
  position: relative;
}
.fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fig figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 22px 16px;
  background: linear-gradient(transparent, rgba(19, 14, 17, 0.86));
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.fig-tall {
  aspect-ratio: 3/4;
}
.fig-wide {
  aspect-ratio: 16/9;
}
.fig-sq {
  aspect-ratio: 1/1;
}
.band {
  position: relative;
  height: 280px;
  overflow: hidden;
}
.band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(19, 14, 17, 0.72), rgba(19, 14, 17, 0.18));
}
.band .txt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}
.band .txt > .wrap {
  width: 100%;
}
.band .txt h2 {
  color: #fff;
  max-width: 22ch;
}
.band .txt p {
  color: #E4D6DC;
  max-width: 52ch;
  margin: 12px 0 0;
  font-size: 0.95rem;
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
}
.gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.gal .fig {
  aspect-ratio: 4/3;
}
.marks {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.marks img {
  height: 64px;
  width: auto;
  border-radius: 8px;
  background: #fff;
}
.marks span {
  font-size: 0.78rem;
  color: var(--gris);
  max-width: 26ch;
}
/* ============================ Fenêtres modales ============================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 20, 24, 0.52);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.overlay.on {
  display: flex;
}
.modal {
  background: var(--blanc);
  border-radius: 20px;
  max-width: 980px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  box-shadow: var(--ombre-forte);
  position: relative;
}
/* La fiche prestation porte tableaux et cartouche côte à côte : elle prend ses aises. */
#ovDetail .modal {
  max-width: min(1360px, 96vw);
}
#ovDetail .dgrid {
  grid-template-columns: 1fr 320px;
  gap: 36px;
}
#ovDetail .dgrid > * {
  min-width: 0;
}
/* sans quoi la grille s'élargit au contenu le plus long */
@media (max-width: 1080px) {
  #ovDetail .dgrid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 900px) {
  #ovDetail .modal-body {
    padding: 18px 16px 24px;
  }
  #ovDetail .perf {
    font-size: 0.74rem;
  }
  #ovDetail .dsec {
    overflow-x: auto;
  }
  /* un tableau trop large glisse, il ne pousse plus la fenêtre */
}
.modal-head {
  position: sticky;
  top: 0;
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
  padding: 26px 32px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  z-index: 2;
}
/* Bandeau visuel de la fiche */
.dvis {
  height: 190px;
  overflow: hidden;
  background: var(--creme-2);
  border-bottom: 1px solid var(--ligne);
}
.dvis img,
.dvis svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Mise en page de la fiche sur une seule fenêtre */
.dgrid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 30px;
  align-items: start;
}
.dside {
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-radius: 14px;
  padding: 4px 18px;
}
.dside dl {
  margin: 0;
}
.dside dt {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 700;
  margin-top: 14px;
}
.dside dd {
  margin: 3px 0 0;
  font-size: 0.88rem;
  color: var(--encre);
}
.dside .sep {
  height: 1px;
  background: var(--ligne);
  margin: 14px -18px 0;
}
.dsec {
  margin: 30px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--ligne);
}
.dsec > h3 {
  font-size: 1.14rem;
  margin-bottom: 6px;
}
.dsec > .sub {
  font-size: 0.84rem;
  color: var(--gris);
  margin: 0 0 18px;
}
.modal-head h2 {
  font-size: 1.55rem;
  line-height: 1.2;
}
.x {
  margin-left: auto;
  background: var(--creme-2);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.15rem;
  color: var(--encre-doux);
  flex: 0 0 auto;
  line-height: 1;
}
.x:hover {
  background: var(--bordeaux);
  color: #fff;
}
.modal-body {
  padding: 26px 32px 32px;
}
.modal-foot {
  position: sticky;
  bottom: 0;
  background: var(--creme);
  border-top: 1px solid var(--ligne);
  padding: 18px 32px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.modal-foot .spacer {
  flex: 1;
}
.dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  border: 1px solid var(--ligne);
  border-radius: 12px;
  overflow: hidden;
  margin: 22px 0;
}
.dl dt {
  background: var(--creme);
  padding: 13px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 700;
  border-bottom: 1px solid var(--ligne);
}
.dl dd {
  margin: 0;
  padding: 13px 18px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--ligne);
  border-left: 1px solid var(--ligne);
}
.dl dt:last-of-type,
.dl dd:last-of-type {
  border-bottom: 0;
}
.params {
  background: var(--creme);
  border-left: 3px solid var(--bordeaux);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  font-size: 0.88rem;
  color: var(--encre-doux);
}
.params b {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 8px;
}
/* Onglets de la fiche prestation */
.tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--ligne);
  margin: 0 0 22px;
}
.tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gris);
  cursor: pointer;
  margin-bottom: -1px;
}
.tabs button.on {
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}
.tabs button:hover {
  color: var(--bordeaux);
}
.tabs .n {
  font-size: 0.7rem;
  background: var(--creme-2);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
}
/* Tableau des performances analytiques */
.perf {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 0 0 22px;
}
.perf caption {
  caption-side: top;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--encre);
  padding: 0 0 10px;
}
.perf th {
  background: var(--creme);
  text-align: left;
  padding: 9px 12px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  border-bottom: 1px solid var(--ligne);
  white-space: nowrap;
  font-weight: 700;
}
.perf td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--ligne);
  vertical-align: top;
  color: var(--encre-doux);
}
.perf td:first-child {
  color: var(--encre);
  font-weight: 600;
}
.perf tr:hover td {
  background: var(--creme);
}
.perf .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.perf-note {
  font-size: 0.78rem;
  color: var(--gris);
  margin: -12px 0 20px;
  line-height: 1.5;
}
.perf-wrap {
  max-height: none;
  overflow: auto;
}
.perf-scroll {
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--ligne);
  border-radius: 12px;
}
.perf-scroll .perf {
  margin: 0;
}
.perf-scroll .perf th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--creme-2);
}
.notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 34px;
}
.notes div {
  padding: 14px 0;
  border-bottom: 1px solid var(--ligne);
}
.notes b {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 5px;
}
.notes span {
  font-size: 0.88rem;
  color: var(--encre-doux);
}
/* Panier */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  background: var(--blanc);
  z-index: 110;
  box-shadow: var(--ombre-forte);
  transform: translateX(100%);
  transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.drawer.on {
  transform: none;
}
.drawer-head {
  padding: 24px 26px;
  border-bottom: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  gap: 14px;
}
.drawer-head h2 {
  font-size: 1.3rem;
}
.drawer-body {
  flex: 1;
  overflow: auto;
  padding: 18px 26px;
}
.drawer-foot {
  padding: 20px 26px;
  border-top: 1px solid var(--ligne);
  background: var(--creme);
}
/* Le panier se lit site par site : un groupe, un colis */
.cart-site {
  border: 1px solid var(--ligne);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--blanc);
}
.cs-tete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--creme-2);
  padding: 11px 16px;
  border-bottom: 1px solid var(--ligne);
}
.cs-tete b {
  font-family: var(--serif);
  font-size: 1rem;
}
.cs-tete span {
  font-size: 0.76rem;
  color: var(--gris);
}
.cs-tete em {
  margin-left: auto;
  font-style: normal;
  font-weight: 700;
  color: var(--bordeaux);
}
.cart-site .line {
  padding-left: 16px;
  padding-right: 16px;
}
.cart-site .line:last-child {
  border-bottom: none;
}
.cmd-sites {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cmd-sites .lbl {
  font-size: 0.76rem;
  color: var(--gris);
  margin-right: 2px;
}
.line {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ligne);
}
.line .info {
  flex: 1;
  min-width: 0;
}
.line h4 {
  font-family: var(--serif);
  font-size: 0.98rem;
  margin: 0 0 5px;
}
.line .sub {
  font-size: 0.76rem;
  color: var(--gris);
}
/* Code article LIMS : en chasse fixe, c'est une référence qu'on relit chiffre à chiffre. */
.line .art-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--encre-doux);
  margin-top: 3px;
}
.qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  overflow: hidden;
  height: 32px;
  flex: 0 0 auto;
}
.qty button {
  background: var(--creme);
  border: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: var(--bordeaux);
  font-size: 1rem;
  line-height: 1;
}
.qty button:hover {
  background: var(--bordeaux);
  color: #fff;
}
.qty span {
  min-width: 32px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 600;
}
.qty input {
  width: 44px;
  height: 30px;
  border: 0;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--encre);
  background: #fff;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty input:focus {
  outline: none;
  background: var(--creme);
}
.rm {
  background: none;
  border: 0;
  color: var(--gris);
  cursor: pointer;
  font-size: 0.76rem;
  text-decoration: underline;
  padding: 4px 0;
}
.rm:hover {
  color: var(--bordeaux);
}
.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.total b {
  font-family: var(--serif);
  font-size: 1.4rem;
}
/* Formulaire de commande */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-l {
  display: block;
  margin-bottom: 14px;
}
.field-l span {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 700;
  margin-bottom: 6px;
}
.field-l span i {
  color: var(--bordeaux-clair);
  font-style: normal;
}
.field-l input,
.field-l textarea,
.field-l select {
  width: 100%;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  padding: 11px 14px;
  background: var(--blanc);
  outline: none;
  font-size: 0.94rem;
  transition: 0.16s;
}
.field-l input:focus,
.field-l textarea:focus,
.field-l select:focus {
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 3px rgba(123, 14, 59, 0.08);
}
.field-l textarea {
  min-height: 78px;
  resize: vertical;
  font-family: var(--sans);
}
/* Le tunnel sépare visiblement les colis */
.recap-site {
  border: 1px solid var(--ligne);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  background: var(--blanc);
}
.rs-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ligne);
}
.rs-tete > b {
  font-family: var(--serif);
  font-size: 1.05rem;
}
.rs-adr {
  flex: 1 0 100%;
  font-size: 0.78rem;
  color: var(--gris);
}
.ech-site {
  border: 1px solid var(--ligne);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 22px;
  background: var(--creme);
}
.es-tete {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ligne);
}
.es-tete b {
  font-family: var(--serif);
  font-size: 1.05rem;
}
.es-tete span {
  font-size: 0.78rem;
  color: var(--gris);
}
fieldset.samples {
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 16px;
}
fieldset.samples legend {
  font-family: var(--serif);
  font-size: 1.02rem;
  padding: 0 8px;
}
.sample-analyses {
  font-size: 0.8rem;
  color: var(--encre-doux);
  background: var(--creme);
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 14px;
}
.sample-analyses b {
  color: var(--bordeaux);
}
.optline {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--encre-doux);
  cursor: pointer;
  padding: 8px 0;
}
.optline input {
  accent-color: var(--bordeaux);
  margin-top: 3px;
  width: 15px;
  height: 15px;
}
.stepper {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.stepper div {
  flex: 1;
  min-width: 130px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--creme);
  border: 1px solid var(--ligne);
  font-size: 0.8rem;
  color: var(--gris);
  font-weight: 600;
}
.stepper div.on {
  background: var(--bordeaux);
  color: #fff;
  border-color: var(--bordeaux);
}
.stepper div.done {
  background: #fff;
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}
.notice {
  background: #FBF1F5;
  border: 1px solid #E9D2DD;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.84rem;
  color: var(--bordeaux-fonce);
  margin-bottom: 18px;
}
.notice b {
  display: block;
  margin-bottom: 4px;
}
/* Fiche d'accompagnement imprimable */
#fiche {
  display: none;
}
.fiche {
  font-size: 11px;
  color: #000;
  font-family: var(--sans);
}
.fiche h1 {
  font-size: 15px;
  font-family: var(--sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.fiche .fh {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--bordeaux);
  padding-bottom: 10px;
  margin-bottom: 14px;
  gap: 20px;
}
.fiche .fh img {
  width: 150px;
  height: auto;
  flex: 0 0 auto;
}
.fiche .ref-acc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 5px;
  text-align: right;
  line-height: 1.25;
}
.fiche .ref-acc img {
  width: auto;
  height: 20px;
  flex: 0 0 auto;
}
.fiche .fh > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.fiche .fh > .ref {
  flex: 0 0 auto;
}
.fiche .ref {
  font-size: 9px;
  color: #555;
  text-align: right;
}
.fiche table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}
.fiche th,
.fiche td {
  border: 1px solid #999;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  font-size: 10.5px;
}
.fiche th {
  background: #F0E7EB;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fiche .lbl {
  font-size: 9px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fiche .fot {
  font-size: 8.5px;
  color: #555;
  border-top: 1px solid #CCC;
  padding-top: 8px;
  line-height: 1.45;
}
/* ---- Étiquette d'expédition, seconde page du bulletin ---- */
.etiq {
  page-break-before: always;
  break-before: page;
  color: #000;
  font-family: var(--sans);
}
.etiq-note {
  font-size: 9px;
  color: #777;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 5mm;
}
.etiq-box {
  border: 2px dashed #9A8F94;
  border-radius: 4mm;
  padding: 10mm 11mm;
}
.etiq-min {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #777;
  font-weight: 700;
}
.etiq-exp {
  font-size: 11.5px;
  color: #333;
  line-height: 1.5;
  border-bottom: 1px solid #D8CEC8;
  padding-bottom: 6mm;
  margin-bottom: 8mm;
}
.etiq-exp b {
  font-size: 13px;
  color: #000;
}
.etiq-nom {
  font-size: 31px;
  font-weight: 700;
  line-height: 1.08;
  margin-top: 2mm;
  color: var(--bordeaux);
}
.etiq-adr {
  font-size: 24px;
  line-height: 1.32;
  margin-top: 4mm;
  color: #000;
}
.etiq-adr b {
  font-weight: 700;
}
.etiq-tel {
  font-size: 13px;
  margin-top: 5mm;
  color: #333;
}
.etiq-pied {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10mm;
  margin-top: 10mm;
  padding-top: 6mm;
  border-top: 1px solid #D8CEC8;
}
.etiq-ref {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 1mm;
}
.etiq-cons {
  font-size: 11px;
  line-height: 1.5;
  color: #333;
  max-width: 88mm;
  text-align: right;
}
.fiche .f-qr {
  flex: 0 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.fiche .f-qr .qs {
  display: flex;
  flex-wrap: wrap;
  gap: 2mm;
  justify-content: flex-end;
  align-items: flex-start;
  max-width: 84mm;
}
.fiche .f-qr svg {
  width: 40mm;
  height: 40mm;
  display: block;
}
.fiche .f-qr b {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-top: 3px;
}
.fiche .f-qr span {
  font-size: 7.5px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ref-bloc {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--creme-2);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 18px 0 24px;
}
.ref-lbl {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 700;
}
.ref-num {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.09em;
  color: var(--bordeaux);
  margin: 4px 0 8px;
}
.ref-tx p {
  font-size: 0.82rem;
  color: var(--encre-doux);
  margin: 0;
  max-width: 52ch;
}
.ref-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ref-qr {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ref-qr svg {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 5px;
}
.ref-qn {
  flex: 1 0 100%;
  text-align: right;
}
.ref-qn {
  font-size: 0.7rem;
  color: var(--gris);
}
@media print {
  body {
    background: #fff;
  }
  body > * {
    display: none !important;
  }
  #fiche {
    display: block !important;
    position: static;
  }
  @page {
    size: A4;
    margin: 12mm;
  }
}
/* Notification */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translate(-50%, 120%);
  background: var(--encre);
  color: #fff;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 0.88rem;
  z-index: 200;
  transition: 0.3s;
  box-shadow: var(--ombre-forte);
  max-width: 90vw;
}
.toast.on {
  transform: translate(-50%, 0);
}
/* ============================ Adaptatif ============================ */
@media (max-width: 1080px) {
  .fams {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 70px 28px 78px;
  }
  .split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .cat-layout {
    grid-template-columns: 1fr;
  }
  .filters {
    position: static;
  }
  footer.site .cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
/* En deçà, le menu déborderait sur les boutons : il passe sous le bouton ☰. */
@media (max-width: 1260px) {
  nav.main {
    display: none;
  }
  .burger {
    display: block;
    margin-left: auto;
    order: 2;
  }
  .hdr-actions {
    order: 3;
  }
}
@media (max-width: 780px) {
  .wrap {
    padding: 0 20px;
  }
  nav.main {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blanc);
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--ligne);
    box-shadow: var(--ombre);
  }
  nav.main.on {
    display: flex;
  }
  nav.main a {
    padding: 12px 0;
    border-bottom: 1px solid var(--ligne);
    width: 100%;
  }
  .burger {
    display: block;
    margin-left: auto;
    order: 2;
  }
  .hdr-actions {
    order: 3;
  }
  .brand img {
    width: 140px;
  }
  .sites,
  .fams,
  .steps,
  .team,
  .form-grid,
  .duo,
  .notes,
  .dgrid {
    grid-template-columns: 1fr;
  }
  .kpi-strip .wrap {
    grid-template-columns: 1fr 1fr;
  }
  .kpi-strip div {
    border-left: 0;
    padding: 16px 0;
  }
  .dvis {
    height: 150px;
  }
  .filters {
    max-height: none;
    overflow: visible;
  }
  .gal {
    grid-template-columns: 1fr 1fr;
  }
  .band {
    height: 220px;
  }
  .perf {
    font-size: 0.76rem;
  }
  .perf th,
  .perf td {
    padding: 7px 8px;
  }
  .dl {
    grid-template-columns: 1fr;
  }
  .dl dt {
    border-bottom: 0;
    padding-bottom: 4px;
  }
  .dl dd {
    border-left: 0;
    padding-top: 4px;
  }
  footer.site .cols {
    grid-template-columns: 1fr;
  }
  section {
    padding: 58px 0;
  }
  .modal-head,
  .modal-body,
  .modal-foot {
    padding-left: 22px;
    padding-right: 22px;
  }
  .topbar .wrap {
    justify-content: center;
    font-size: 0.72rem;
  }
}
/* ============ Terra Mea : renvoi discret sous le héros ============ */
.bande-tm {
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
  padding: 13px 0;
}
.bande-tm .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.bande-tm img {
  height: 34px;
  width: auto;
  flex: 0 0 auto;
}
.tm-tx {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--encre-doux);
  line-height: 1.45;
}
.btn-tm-plein {
  background: #2C5565;
  color: #fff;
  border-color: #2C5565;
  font-weight: 600;
  flex: 0 0 auto;
}
.btn-tm-plein:hover {
  background: #1E3B47;
  border-color: #1E3B47;
  color: #fff;
}
.topbar-tm {
  color: #CAA978 !important;
  font-weight: 600;
  text-decoration: none;
}
.topbar-tm:hover {
  text-decoration: underline;
}
/* Une accolade fermante orpheline se trouvait ici. Sans effet dans un navigateur, refusée par LESS. */
.acc-site {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}
.acc-site img {
  height: 22px;
  width: auto;
  background: #fff;
  padding: 2px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.meth b i {
  color: var(--bordeaux);
  font-style: normal;
  margin-left: 3px;
}
.meth-l.on {
  border-color: var(--bordeaux);
  background: var(--blanc);
  box-shadow: 0 0 0 2px rgba(123, 14, 59, 0.1);
}
.meth-p .acc-mini {
  height: 22px;
}
.meth-p > span {
  display: block;
  font-size: 0.7rem;
  color: var(--gris);
  font-weight: 500;
}
.meth-na {
  color: var(--gris);
  font-weight: 500;
  font-size: 0.74rem;
}
.meth-att {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--bordeaux);
  font-weight: 600;
}
/* Boutons de site à poids égal : chaque laboratoire a sa couleur, aucun ne prime */
.btn-site {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 1.5px solid var(--sc);
  border-radius: 12px;
  background: var(--blanc);
  color: var(--sc);
  padding: 8px 15px;
  cursor: pointer;
  transition: 0.16s;
  text-align: left;
  line-height: 1.25;
}
.btn-site b {
  font-size: 0.86rem;
  font-weight: 700;
}
.btn-site span {
  font-size: 0.7rem;
  color: var(--gris);
  font-weight: 500;
}
.btn-site:hover {
  background: var(--sc);
  color: #fff;
}
.btn-site:hover span {
  color: rgba(255, 255, 255, 0.85);
}
.btn-site:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.btn-site:disabled:hover {
  background: var(--blanc);
  color: var(--sc);
}
.btn-site:disabled:hover span {
  color: var(--gris);
}
.lbl-etape {
  color: var(--bordeaux) !important;
  font-weight: 600;
}
.cs-pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.meth-mat {
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--or, #8A5A12);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 1px 0 2px;
}
.mat-seg {
  display: flex;
  gap: 2px;
  background: var(--ligne);
  padding: 2px;
  border-radius: 10px;
  margin: 8px 0 16px;
  max-width: 340px;
}
.mat-seg button {
  flex: 1;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--encre-doux);
  transition: 0.15s;
}
.mat-seg button:hover {
  background: var(--creme);
}
.mat-seg button.on {
  background: var(--bordeaux);
  color: #fff;
}
.bs-acc {
  font-size: 0.64rem !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc) !important;
}
.bs-acc.hors {
  color: var(--gris) !important;
  font-weight: 600;
}
.btn-site:hover .bs-acc {
  color: rgba(255, 255, 255, 0.9) !important;
}
/* ============ Ce qui était écrit en ligne dans le gabarit ============
   Ces règles reprennent, valeur pour valeur, les styles en ligne qui vivaient dans
   templates/catalog.jinja2. Rien n'a été harmonisé au passage : les écarts de taille entre
   .p-echantillon, .p-accreditation, .p-portee et .p-fiche (.92, .9, .9 et .86 rem pour le
   même rôle) sont ceux d'origine.

   ⚠️ La même migration a été faite dans templates/catalog.html, où les règles vivent dans
   le bloc <style>. Les deux fichiers se maintiennent ensemble. */
/* Trois éléments étaient masqués par un style en ligne que le JavaScript remplaçait. Ils
   portent désormais l'attribut hidden. Le !important est nécessaire : .cart-count et .btn
   posent un display, qui l'emporterait sinon sur la règle du navigateur. */
[hidden] {
  display: none !important;
}
/* En-tête */
#authZone {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Panneaux : leur écart au bloc précédent */
.panel-suite {
  margin-top: 20px;
}
.panel-detache {
  margin-top: 44px;
}
.panel-contacts {
  margin-top: 26px;
}
.team-collee {
  margin-top: 0;
}
.fig-espacee {
  margin-bottom: 20px;
}
.eyebrow-bordeaux {
  color: var(--bordeaux);
}
/* Paragraphes d'accompagnement, section par section */
.p-echantillon {
  font-size: 0.92rem;
  color: var(--encre-doux);
}
.p-accreditation {
  font-size: 0.9rem;
  color: var(--encre-doux);
}
.p-portee {
  font-size: 0.9rem;
  color: var(--encre-doux);
}
.p-fiche {
  font-size: 0.86rem;
  color: var(--encre-doux);
}
.sans-marge {
  margin: 0;
}
/* Notes de bas de bloc */
.note-tableau {
  font-size: 0.78rem;
  color: var(--gris);
  margin-top: 16px;
}
.note-bas {
  font-size: 0.8rem;
  color: var(--gris);
  margin: 18px 0 0;
}
.note-panier {
  font-size: 0.74rem;
  color: var(--gris);
  margin: 12px 0 0;
  text-align: center;
}
/* Performances analytiques */
#perfNotes {
  margin-bottom: 36px;
}
.searchbox-outil {
  max-width: 520px;
  margin: 0;
  flex: 1;
}
#abrev {
  font-size: 0.84rem;
  color: var(--encre-doux);
}
/* Pied de page */
.pied-signature {
  max-width: 38ch;
}
/* En-têtes de fenêtre */
.code-entete {
  margin-bottom: 10px;
}
.modale-sous-titre {
  font-size: 0.82rem;
  color: var(--gris);
  margin-top: 6px;
}
#ovOrder .modal {
  max-width: 880px;
}
#ovLogin .modal {
  max-width: 620px;
}
/* Panier */
#ovCart {
  background: rgba(27, 20, 24, 0.4);
}
.drawer-head .x {
  margin-left: auto;
}
#goOrder,
#goDevis {
  width: 100%;
}
#goDevis {
  margin-top: 10px;
}
/* Motif de blocage du parcours, sous le total. Masqué tant que updateJourneyLock() n'a rien
   à dire : c'est l'attribut hidden qui s'en charge, plus le style en ligne d'autrefois. */
#cartVerrou {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #8A1A2F;
  background: #FDE8ED;
  border-left: 3px solid #8A1A2F;
  border-radius: 0 4px 4px 0;
  padding: 9px 12px;
  margin: 0 0 12px;
}
/* ============================ Recherche par besoin — IA ============================ */
.ai-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(560px, 92vw);
  z-index: 81;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 16px;
  box-shadow: var(--ombre-forte);
  padding: 20px 22px;
}
.ai-search-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--gris);
  font-size: 1rem;
  line-height: 1;
  padding: 4px;
}
.ai-search-close:hover {
  color: var(--bordeaux);
}
/* Chaque échange s'ajoute à la suite (appendAiSearchTurn(), ai_search.js), jamais en
   remplacement. margin-top dégage la piste de scrollbar de sous .ai-search-close (top:10px,
   ~24px de haut) : sans lui, les deux se superposaient sur ~14px. */
.ai-search-body {
  padding-right: 18px;
  margin-top: 28px;
  max-height: 380px;
  overflow-y: auto;
}
/* #aiSearchReopen étant toujours visible, ce panneau peut s'ouvrir sans échange : le message
   ne vit qu'en CSS (aucun état JS à synchroniser), et disparaît de lui-même dès qu'un premier
   .ai-search-turn est ajouté (appendAiSearchTurn()). */
.ai-search-body:empty::before {
  content: "Vous n'avez encore posé aucune question. Décrivez votre besoin ci-dessous, ou depuis la barre de recherche.";
  display: block;
  font-size: 0.86rem;
  color: var(--gris);
  text-align: center;
  padding: 26px 8px;
}
.ai-search-composer {
  margin-top: 14px;
}
.ai-search-composer-row {
  display: flex;
  gap: 8px;
}
.ai-search-composer input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: var(--creme);
  padding: 9px 16px;
  font-size: 0.88rem;
  outline: none;
  transition: 0.16s;
  color: var(--encre);
}
.ai-search-composer input:focus {
  border-color: var(--bordeaux);
  background: var(--blanc);
  box-shadow: 0 0 0 3px rgba(123, 14, 59, 0.09);
}
.ai-search-counter {
  display: block;
  text-align: right;
  font-size: 0.68rem;
  color: var(--gris);
  margin-top: 4px;
}
.ai-search-turn {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ligne);
}
.ai-search-turn:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.ai-search-who {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 3px;
}
.ai-search-question {
  font-size: 0.86rem;
  color: var(--encre);
  line-height: 1.5;
  margin: 0 0 10px;
}
.ai-search-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--encre-doux);
}
.ai-search-loader {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2px solid var(--ligne);
  border-top-color: var(--bordeaux);
  animation: ai-search-spin 0.7s linear infinite;
}
@keyframes ai-search-spin {
  to {
    transform: rotate(360deg);
  }
}
.ai-search-text {
  font-size: 0.86rem;
  color: var(--encre-doux);
  line-height: 1.5;
  margin: 0 0 12px;
}
.ai-search-text:last-child {
  margin-bottom: 0;
}
.ai-search-card {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: 0.16s;
}
.ai-search-card:hover {
  border-color: var(--bordeaux);
  background: var(--blanc);
}
.ai-search-card .tv {
  width: 48px;
  height: 38px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--creme-2);
}
.ai-search-card .tv img,
.ai-search-card .tv svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ai-search-card .tx {
  min-width: 0;
  flex: 1;
}
.ai-search-card .tx b {
  display: block;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
}
.ai-search-card .tx span {
  font-size: 0.74rem;
  color: var(--gris);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-search-card .go {
  font-size: 0.7rem;
  color: var(--bordeaux);
  font-weight: 700;
  flex: 0 0 auto;
}
.ai-search-note {
  font-size: 0.72rem;
  color: var(--gris);
  line-height: 1.4;
  margin: 4px 0 0;
}
/* Mention de transparence, permanente (cf. CLAUDE.md) : à la différence de .ai-search-note
   (disclaimerTemplate(), conditionnel aux prestations proposées), reste affichée tant que
   #aiSearchPanel est ouvert, quel que soit le contenu de #aiSearchBody. */
.ai-search-disclosure {
  font-size: 0.7rem;
  color: var(--bordeaux);
  line-height: 1.4;
  text-align: center;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--ligne);
}
/*# sourceMappingURL=catalog.css.map */