:root{
  --nav:#081d2c;
  --nav2:#0d3852;
  --blue:#087aa8;
  --sky:#27a9d4;
  --panel:#ffffff;
  --line:#d9e4ea;
  --ink:#102734;
  --muted:#607684;
  --radius:18px;
  --shadow:0 12px 34px rgba(8,35,51,.08);
}
body{background:linear-gradient(145deg,#f5f8fa 0,#eef4f7 50%,#f7fafb 100%);letter-spacing:-.005em}
.sidebar{background:linear-gradient(180deg,#071d2c 0,#0b2d42 72%,#0a2232 100%);box-shadow:12px 0 36px rgba(6,27,41,.12)}
.brandmark{background:linear-gradient(145deg,#43c4e7,#0b719d);box-shadow:0 8px 22px rgba(29,169,211,.28)}
.topbar{background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(198,216,226,.75)}
.main{max-width:1540px;margin:0 auto;width:100%}
.card{box-shadow:var(--shadow);border-color:rgba(205,220,228,.9)}
.screen-head h1{letter-spacing:-.035em}
.btn{border-radius:11px;font-weight:800;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(12,57,82,.10)}
.btn.primary{background:linear-gradient(135deg,#0b759f,#0b5579);border-color:#0b668d}
.v24-drop-zone{min-height:112px;background:linear-gradient(135deg,#f8fcfe,#eaf6fb)!important;border-width:1.5px!important}
.v24-drop-icon{background:linear-gradient(145deg,#dff5fd,#bde8f8)!important;box-shadow:inset 0 0 0 1px rgba(20,126,166,.09)}
.v241-category{padding:0;overflow:hidden;border:1px solid #d5e2e9;background:linear-gradient(180deg,#fff,#fbfdfe)}
.v241-category .category-header{padding:17px 20px;margin:0;border-bottom:1px solid #e3ebef;background:linear-gradient(105deg,#f8fbfc,#fff 68%)}
.v241-category .candidate-grid{padding:16px}
.v241-category-title{display:flex;align-items:center;gap:14px;min-width:0}
.v241-cat-visual{display:block;flex:0 0 70px;width:70px;height:70px;border-radius:18px;background-image:url('./assets/category/raw-material-categories.png');background-size:600% 300%;background-repeat:no-repeat;background-color:#edf5f8;box-shadow:inset 0 0 0 1px rgba(22,84,111,.08),0 8px 20px rgba(12,62,86,.10)}
.candidate{min-height:250px;border-color:#dbe6eb;box-shadow:0 7px 20px rgba(10,45,65,.045);transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease}
.candidate:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(10,45,65,.085)}
.candidate.selected{border-color:#1596c2;background:linear-gradient(160deg,#f7fdff,#edf9fd)}
.score{border-radius:50%;background:linear-gradient(145deg,#e8f7fc,#cfeefa);box-shadow:inset 0 0 0 1px rgba(13,122,168,.08)}
.source-level{letter-spacing:.045em}
.v241-mentions{box-shadow:0 7px 22px rgba(10,45,65,.045)}
@media(max-width:720px){.v241-cat-visual{width:58px;height:58px;flex-basis:58px}.v241-category .candidate-grid{padding:12px}}


/* V24.2 — visuels premium des catégories de matières proposées */
.v9-category-head .v241-cat-visual{
  width:76px;height:76px;flex:0 0 76px;border-radius:22px;
  background-color:transparent;
  border:1px solid rgba(119,157,176,.16);
  box-shadow:0 12px 30px rgba(8,52,73,.11), inset 0 0 0 1px rgba(255,255,255,.62);
  filter:saturate(.92) contrast(1.02);
  transform:translateZ(0);
  transition:transform .28s ease,box-shadow .28s ease,filter .28s ease;
  animation:v242MaterialFloat 5.4s ease-in-out infinite;
}
.v9-category:nth-of-type(2n) .v241-cat-visual{animation-delay:-1.4s}
.v9-category:nth-of-type(3n) .v241-cat-visual{animation-delay:-2.7s}
.v9-category:hover .v241-cat-visual{
  transform:translateY(-3px) scale(1.045);
  filter:saturate(1.04) contrast(1.04);
  box-shadow:0 16px 36px rgba(8,74,105,.16), inset 0 0 0 1px rgba(255,255,255,.78);
}
.v9-category-head{min-height:96px;align-items:center}
.v9-head-right{display:flex;align-items:center;gap:14px}
@keyframes v242MaterialFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(.45deg)}}
@media (prefers-reduced-motion:reduce){.v9-category-head .v241-cat-visual{animation:none;transition:none}}
@media(max-width:720px){.v9-category-head .v241-cat-visual{width:62px;height:62px;flex-basis:62px;border-radius:17px}.v9-head-right{gap:8px}}

/* V25 — visuels sans cadre : l'objet flotte directement dans l'interface */
.v9-category-head .v241-cat-visual,.v241-cat-visual{
  border:0!important;background-color:transparent!important;box-shadow:none!important;border-radius:0!important;
  filter:drop-shadow(0 9px 10px rgba(8,52,73,.16)) saturate(.96) contrast(1.02);
}
.v9-category:hover .v241-cat-visual{box-shadow:none!important;filter:drop-shadow(0 12px 13px rgba(8,74,105,.20)) saturate(1.05) contrast(1.04)}