:root{
  /* Palette OFFICIELLE PICO — charte de marque (valeurs corrigées par Alex) */
  --navy:#0A273B; --creme:#FAF6F3; --tangerine:#FF523A; --tangerine-d:#DB4632;
  --turquoise:#A1D1C5; --saumon:#F38482; --lilas:#FFD4FD;
  /* Rôles + alias : le code existant reste valide, les couleurs deviennent PICO */
  --paper:var(--creme); --panel:#FFFFFF; --ink:var(--navy); --ink-soft:#41505E;
  --cyan:var(--tangerine); --cyan-deep:var(--tangerine-d); --magenta:var(--saumon); --yellow:var(--tangerine);
  --line:#E7E1D9; --line-soft:#F1ECE5; --grey:#8A8F98;
  --radius:16px; --shadow:0 1px 2px rgba(18,38,57,.05),0 12px 32px rgba(18,38,57,.07);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Typo PICO : Postemara (display) + Glacial Indifference (corps). Fichiers -> fonts/ */
  --display:'Postemara','Arial Rounded MT Bold','Avenir Next',system-ui,sans-serif;
  --sans:'Glacial Indifference','Avenir Next','Helvetica Neue',system-ui,sans-serif;
}
/* Typo de marque PICO (§9.2). Dépose les fichiers dans fonts/ (voir fonts/LISEZ-MOI).
   Absents -> le navigateur retombe silencieusement sur les fallbacks arrondis. */
@font-face{
  font-family:'Postemara'; font-display:swap; font-weight:400 900;
  src:url('/fonts/Postemara.otf') format('opentype'),
      url('/fonts/Postemara.ttf') format('truetype');
}
@font-face{
  font-family:'Glacial Indifference'; font-display:swap; font-weight:400 700;
  src:url('/fonts/GlacialIndifference-Regular.otf') format('opentype'),
      url('/fonts/GlacialIndifference-Regular.ttf') format('truetype');
}
*{box-sizing:border-box}
/* L'attribut hidden prime TOUJOURS sur un display: (évite modals/menus/images
   fantômes quand une règle .x{display:…} écraserait le hidden par défaut). */
[hidden]{display:none !important}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding:0 max(16px,env(safe-area-inset-left)) 64px;
}

/* ---------- header ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1180px; margin:0 auto; padding:22px 4px 26px;
}
.brand{display:flex; align-items:baseline; gap:12px}
.mark{display:inline-grid; grid-template-columns:repeat(2,9px); grid-gap:2px; transform:translateY(2px)}
.mark i{width:9px; height:9px; background:var(--c); border-radius:2px; display:block}
.brand-name{font-family:var(--display); font-weight:800; letter-spacing:-.01em; font-size:22px}
.brand-sub{color:var(--grey); font-size:13px; letter-spacing:.02em}
.source{
  font-size:12px; font-weight:600; letter-spacing:.01em; padding:6px 12px;
  border-radius:999px; border:1px solid var(--line); background:var(--panel);
}
.source.is-demo{color:var(--magenta); border-color:#F3C9D8; background:#FEF3F7}
.source.is-live{color:var(--cyan-deep); border-color:#C7E7EE; background:#EEF9FB}

/* ---------- layout ---------- */
.grid{
  max-width:1180px; margin:0 auto; display:grid; gap:20px;
  grid-template-columns:1.15fr .85fr; align-items:start;
}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-deep); margin:0 0 10px;
}
.h-lead{font-family:var(--display); font-size:28px; line-height:1.12; letter-spacing:-.01em; margin:0 0 20px; font-weight:800}

/* ---------- search ---------- */
.search input{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); font:inherit; color:var(--ink);
}
.search input:focus{outline:2px solid var(--cyan); outline-offset:1px; border-color:transparent}
.search{margin-bottom:14px}

/* ---------- table ---------- */
.table-wrap{border:1px solid var(--line); border-radius:12px; overflow:hidden}
table.cmd{width:100%; border-collapse:collapse}
table.cmd thead th{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--grey); text-align:center; padding:11px 8px; background:var(--line-soft);
  border-bottom:1px solid var(--line);
}
table.cmd th.c-prod{text-align:left; padding-left:16px}
table.cmd tbody tr{border-bottom:1px solid var(--line-soft)}
table.cmd tbody tr:last-child{border-bottom:0}
table.cmd tbody tr.hidden{display:none}
table.cmd tbody tr.active{background:#F4FCFD}
td.prod{padding:10px 8px 10px 16px}
.code{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink)}
.title{color:var(--ink-soft); font-size:13px}
td.qty{width:74px; text-align:center; padding:8px 6px}
td.qty input{
  width:56px; padding:8px 6px; text-align:center; font-family:var(--mono); font-size:14px;
  border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink);
  -moz-appearance:textfield;
}
td.qty input::-webkit-outer-spin-button,td.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
td.qty input:focus{outline:2px solid var(--cyan); outline-offset:1px; border-color:transparent}
td.qty input.filled{border-color:var(--cyan); background:#EAF8FB; font-weight:700}
td.na{color:var(--line); text-align:center; font-family:var(--mono)}
th.c-dl{width:44px}
td.dl-cell{width:44px; text-align:center; vertical-align:middle; padding:8px 4px}

/* ---------- totals ---------- */
.totals{display:flex; align-items:center; justify-content:space-between; margin-top:16px}
.count{font-size:13px; color:var(--ink-soft)}
.count span{font-family:var(--mono); font-weight:700; color:var(--ink)}
button.ghost{
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:8px 14px; border-radius:9px; font:inherit; font-size:13px; cursor:pointer;
}
button.ghost:hover{border-color:var(--grey)}
button.ghost.wide{width:100%; margin-top:10px; padding:12px; border-radius:11px; font-size:14px}
button.ghost.wide:disabled{color:var(--line); border-color:var(--line-soft); cursor:not-allowed}

/* ---------- plates (signature) ---------- */
/* Colonne droite « Plaques à imprimer » : reste visible pendant qu'on défile la
   longue liste de gauche (sticky) + défile en interne si trop haute. */
.plates{position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto}
.plates-head{display:flex; align-items:flex-end; gap:16px; margin-bottom:18px}
.big{font-family:var(--display); font-weight:800; font-size:44px; line-height:.9; color:var(--ink)}
.big small{display:block; font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--grey); margin-top:6px}
.plates-hint{font-size:13px; color:var(--grey); margin:0; max-width:26ch}

.plates-list{display:flex; flex-direction:column; gap:24px; min-height:60px}
.grp-label{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 12px; display:flex; align-items:center; gap:8px;
}
.grp-label .dot{width:10px;height:10px;border-radius:3px;background:var(--grey)}
.grp-label .dot.f1000{background:var(--navy)}     /* §9.1 */
.grp-label .dot.f500{background:var(--saumon)}
.grp-label .dot.f300{background:var(--turquoise)}
.grp-label .dot.fbox{background:var(--ink-soft)}  /* section Boîtes · 3UP */
.grp-label .dot.fcorpo{background:var(--tang)}    /* planches PICORPO (hot folder dédié) */
/* Vignette d'une PLANCHE PICORPO : on montre la boîte elle-même. Il n'y a pas
   de cases à combler — une planche, une boîte. */
.vign.vign-img{display:block;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:8px;position:relative}
/* `contain`, pas `cover` : on veut voir LA BOÎTE en entier — une planche
   recadrée ne dit plus de quel produit il s'agit. */
.vign.vign-img img{width:100%;height:100%;object-fit:contain;display:block;
  background:var(--cream, #FAF8F4)}
.grp-nb{margin-left:auto; font-weight:700; color:var(--grey); text-transform:none; letter-spacing:0}

/* ---------- vignettes de plaques (compactes, proportionnelles) ---------- */
.vign-row{display:flex; gap:14px; flex-wrap:wrap}
.vign-wrap{display:flex; flex-direction:column; gap:6px; animation:pop .18s ease}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.vign-head{display:flex; align-items:center; gap:8px}
.vign-num{
  font-family:var(--mono); font-size:10px; font-weight:700; color:#fff;
  background:var(--navy); padding:1px 7px; border-radius:999px;
}
.vign-gab{font-family:var(--mono); font-size:9.5px; color:var(--grey); letter-spacing:-.02em}
.vign{
  display:flex; gap:3px; padding:4px; background:#fff; border:1px solid var(--line);
  border-radius:6px; box-shadow:0 4px 12px rgba(10,39,59,.06); position:relative;
}
/* feuilles identiques dédupliquées : badge ×N bien visible sur la vignette */
.vign-copies{
  position:absolute; top:-8px; right:-8px; background:var(--navy); color:#fff;
  font-family:var(--mono); font-weight:800; font-size:12px; line-height:1;
  padding:5px 8px; border-radius:999px; box-shadow:0 3px 8px rgba(10,39,59,.35);
}
.copies-note{color:var(--navy)}
.cell{
  flex:1 1 0; border-radius:3px; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; min-width:0;
}
.cell span{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:-.02em; padding:2px}
.cell.full{color:#fff}
.cell.full.f1000{background:var(--navy)}                 /* §9.1 : 1000 = navy */
.cell.full.f500{background:var(--saumon)}                /* §9.1 : 500 = saumon */
.cell.full.f300{background:var(--turquoise); color:var(--navy)}  /* §9.1 : 300 = turquoise */
.cell.full.fbox{background:var(--ink-soft)}              /* boîtes (section 3UP) */
.cell.vide{
  background:repeating-linear-gradient(45deg,#fafafa,#fafafa 4px,#f2efe9 4px,#f2efe9 8px);
  border:1px dashed var(--line); color:var(--grey); font-size:8px; letter-spacing:.02em;
}
/* case vide CLIQUABLE = remplissage sans pairage */
.cell.vide.clic{cursor:pointer; transition:border-color .12s, color .12s}
.cell.vide.clic:hover{border-color:var(--tangerine); color:var(--tangerine)}
/* remplissage appliqué : contour tangerine pointillé + « + » (re-clic = retirer) */
.cell.rempl{outline:2px dashed var(--tangerine); outline-offset:-2px; cursor:pointer}
/* remplissage PROPOSÉ (favoris) : non appliqué tant que « Appliquer » n'est pas cliqué */
.cell.rempl.prop{opacity:.62; cursor:default}

/* bouton « ✦ Combler » d'une feuille incomplète */
.vign-fill{
  margin-left:auto; border:1px solid var(--line); background:#fff; color:var(--tangerine);
  font:inherit; font-size:9.5px; font-weight:700; padding:1px 7px; border-radius:999px;
  cursor:pointer; transition:border-color .12s;
}
.vign-fill:hover{border-color:var(--tangerine)}
.combler-global{width:100%; margin-top:14px; color:var(--tangerine); font-weight:700}

/* rappel discret de la règle des restes */
.reste-note{font-size:11.5px; color:var(--grey); margin:-8px 0 12px}

/* onglets Casse-têtes / Boîtes du panneau plaques (mêmes pilules que le catalogue) */
.plates-tabs{margin-bottom:16px}
.plates-tabs .tab:disabled{
  opacity:.45; cursor:not-allowed; background:none; color:var(--grey);
  border-color:var(--line);
}

/* dock des boutons de dépôt : GLOBAL (les 2 onglets), collé au bas du panneau
   qui défile — toujours visible même avec beaucoup de vignettes */
.depot-dock{
  position:sticky; bottom:0; z-index:5; background:var(--panel);
  margin:6px -24px 0; padding:2px 24px 10px;
  border-top:1px solid var(--line-soft); box-shadow:0 -10px 18px -14px rgba(10,39,59,.25);
}

/* barre de proposition (favoris) : rien n'est appliqué sans confirmation */
.prop-bar{
  display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px;
  border:1.5px dashed var(--tangerine); border-radius:10px; font-size:12.5px;
  color:var(--ink-soft); background:#fff;
}
.prop-bar .prop-actions{margin-left:auto; display:flex; gap:8px}
.prop-bar .primary.compact{width:auto; margin:0; padding:7px 14px; font-size:12.5px}
.prop-bar .ghost{padding:6px 12px}

/* popover de remplissage d'un slot vide */
#slotPop{
  position:fixed; z-index:80; width:300px; max-height:340px; display:flex;
  flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 14px 40px rgba(10,39,59,.18); padding:10px;
}
#slotPop .slotpop-t{margin:0 0 8px; font-size:12px; font-weight:800; color:var(--ink)}
#slotPop .slotpop-t em{font-style:normal; font-weight:600; color:var(--grey)}
#slotPop input[type="search"]{
  width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:12.5px; margin-bottom:8px;
}
#slotPop .slotpop-list{overflow-y:auto; display:flex; flex-direction:column; gap:2px}
.slotpop-row{
  display:flex; align-items:center; gap:7px; width:100%; text-align:left; border:0;
  background:none; font:inherit; font-size:12px; padding:6px 8px; border-radius:8px;
  cursor:pointer;
}
.slotpop-row:not(.is-box):hover{background:var(--line-soft)}
.slotpop-row.is-box{cursor:default}
.slotpop-row .code{font-family:var(--mono); font-weight:700; white-space:nowrap}
.slotpop-row .t{color:var(--grey); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.slotpop-fav{color:var(--tangerine)}
.slotpop-row .chips{margin-left:auto; display:flex; gap:4px}
.slotpop-chip{
  border:1px solid var(--line); background:#fff; font:inherit; font-size:10.5px;
  font-weight:700; padding:2px 7px; border-radius:999px; cursor:pointer;
}
.slotpop-chip:hover{border-color:var(--tangerine); color:var(--tangerine)}
.slotpop-vide{font-size:12px; color:var(--grey); padding:8px}

/* remplissages dans le récap de dépôt */
.rempl-recap{font-size:12.5px; color:var(--tangerine-d); font-weight:600; margin:10px 0 0}

/* ---------- generate + result ---------- */
button.primary{
  width:100%; margin-top:22px; padding:15px; border:0; border-radius:12px;
  background:var(--tangerine); color:#fff; font:inherit; font-weight:800; font-size:15px;
  cursor:pointer; transition:transform .06s, background .15s;   /* §9.1 : action principale */
}
button.primary:hover:not(:disabled){background:var(--tangerine-d)}
button.primary:active:not(:disabled){transform:translateY(1px)}
button.primary:disabled{background:var(--line); color:var(--grey); cursor:not-allowed}

/* ---------- boutons jumeaux de dépôt + export ZIP ---------- */
.depot-tout{width:100%; margin-top:22px; font-size:16px; box-shadow:0 2px 10px rgba(255,82,58,.35)}
.depot-sub-inline{font-weight:700; font-size:13px; opacity:.9}
.vider-haut{margin-left:auto; padding:6px 12px; font-size:12.5px}
.depot-twins{margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.depot-col{display:flex; flex-direction:column; align-items:stretch; min-width:0}
.depot-col button.primary{width:100%; margin-top:0}       /* même taille, côte à côte */
.depot-sub{margin-top:6px; text-align:center; font-size:12px; font-weight:700; color:var(--ink-soft)}
.depot-col button.primary:disabled + .depot-sub{color:var(--grey)}
.zip-btn{
  width:100%; margin-top:12px; padding:12px; border-radius:11px; cursor:pointer;
  background:#fff; color:var(--navy); border:2px solid var(--navy); font:inherit;
  font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;
  gap:8px; transition:background .15s, color .15s;
}
.zip-btn:hover:not(:disabled){background:var(--navy); color:#fff}
.zip-btn:disabled{border-color:var(--line); color:var(--grey); cursor:not-allowed}
.zip-btn span{font-size:16px; line-height:1}

/* modale ZIP */
.zip-choices{display:flex; flex-direction:column; gap:10px; margin:16px 0 8px}
.zip-check{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--navy); cursor:pointer}
.zip-check input{width:18px; height:18px; accent-color:var(--tangerine)}
.zip-check input:disabled + span{color:var(--grey)}
.zip-count{font-style:normal; color:var(--ink-soft); font-size:12.5px}
.zip-spin{display:flex; align-items:center; gap:10px; margin:6px 0 2px}
.zip-spin[hidden]{display:none}
.zip-spin span{
  width:16px; height:16px; border-radius:999px; border:2px solid var(--line-soft);
  border-top-color:var(--tangerine); animation:spin .8s linear infinite;
}
.zip-spin em{font-style:normal; font-size:12.5px; color:var(--ink-soft); font-weight:600}
@keyframes spin{to{transform:rotate(360deg)}}

/* PICORPO — création (calque PICUSTOM : formulaire gauche, aperçu droite) */
.corpo-row{display:flex; gap:8px; align-items:center}
.corpo-select{flex:1; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:9px; font:inherit; background:#fff}
.corpo-neuf{margin-top:10px; display:flex; flex-direction:column; gap:8px;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:10px; padding:12px}
.corpo-neuf input[type=text]{padding:9px 10px; border:1px solid var(--line); border-radius:9px; font:inherit}
.corpo-logos{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0}
.corpo-logo{display:inline-flex; cursor:pointer; border:2px solid var(--line); border-radius:10px; padding:4px; background:#fff}
.corpo-logo input{display:none}
.corpo-logo img{width:64px; height:44px; object-fit:contain}
.corpo-logo:has(input:checked){border-color:var(--tangerine); background:#FFF0ED}

/* barre d'espace disque (Réglages) */
.disk-bar{height:9px; border-radius:999px; background:var(--line-soft); overflow:hidden; margin:4px 0 6px}
.disk-bar span{display:block; height:100%; width:0; background:var(--navy); border-radius:999px; transition:width .3s}
.disk-bar span.plein{background:var(--tangerine)}

/* ---------- bannière mode démo ---------- */
.banner{
  max-width:1180px; margin:0 auto 4px; display:flex; align-items:center; gap:14px;
  background:var(--lilas); border:1px solid #F3C0EF; border-radius:14px; padding:14px 18px;
  color:var(--navy); font-size:13.5px; line-height:1.45;
}
.banner-ico{font-size:22px; line-height:1}
.banner div{flex:1}
.banner-cta{
  white-space:nowrap; background:var(--navy); color:#fff; border:0; border-radius:999px;
  padding:9px 16px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.banner-cta:hover{background:#08344f}

/* ---------- barre de progression (dépôt) ---------- */
.progress[hidden]{display:none}             /* l'attribut hidden doit primer */
.progress{margin-top:14px; display:flex; align-items:center; gap:10px}
.progress span{
  flex:1; height:8px; border-radius:999px; background:var(--line-soft); overflow:hidden; position:relative;
}
.progress span::after{
  content:""; position:absolute; left:-40%; top:0; height:100%; width:40%;
  border-radius:999px; background:var(--tangerine); animation:slide 1.1s ease-in-out infinite;
}
.progress em{font-size:12.5px; color:var(--ink-soft); font-style:normal; font-weight:600}
@keyframes slide{0%{left:-40%}100%{left:100%}}

.result{margin-top:18px; border-top:1px solid var(--line); padding-top:16px}
.result h3{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-deep); margin:0 0 10px}
.result ul{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:4px}
.result li{font-family:var(--mono); font-size:12px; color:var(--ink-soft); display:flex; gap:8px}
.result li::before{content:"→"; color:var(--cyan)}
.dl{
  display:inline-block; padding:11px 16px; border-radius:10px; background:var(--cyan);
  color:#fff; font-weight:700; font-size:14px; text-decoration:none;
}
.dl:hover{background:var(--cyan-deep)}
.okbox{font-family:var(--sans);font-size:13px;color:var(--ink-soft);background:#EEF9FB;border:1px solid #C7E7EE;border-radius:10px;padding:11px 13px;line-height:1.5}
.okbox .mono{font-family:var(--mono);font-size:12px;color:var(--ink)}
.errs{color:var(--magenta); font-size:12.5px; margin-top:8px}

/* ---------- params ---------- */
.params{max-width:1180px; margin:22px auto 0; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.params summary{cursor:pointer; padding:16px 24px; font-weight:700; font-size:14px; list-style:none}
.params summary::-webkit-details-marker{display:none}
.params summary::before{content:"⌄"; display:inline-block; margin-right:10px; color:var(--grey); transition:transform .2s}
.params[open] summary::before{transform:rotate(180deg)}
.params .muted{color:var(--grey); font-weight:500}
.params-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border-top:1px solid var(--line)}
.params-grid > div{background:var(--panel); padding:14px 24px; display:flex; flex-direction:column; gap:3px}
.params-grid .wide{grid-column:1/-1}
.params-grid .k{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--grey)}
.params-grid .v{font-size:14px; color:var(--ink)}
.params-grid .v.small{font-size:12px; word-break:break-all; color:var(--ink-soft)}

/* ---------- onglets Standard / PICUSTOM ---------- */
.tabs{display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.tab{
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:8px 16px; border-radius:999px; font:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .15s,border-color .15s,color .15s;
}
.tab:hover{border-color:var(--grey)}
.tab.is-active{background:var(--navy); color:#fff; border-color:var(--navy)}
.tab-count{
  display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:999px;
  background:var(--lilas); color:var(--navy); font-size:11px; line-height:18px; text-align:center;
}
.tab.is-active .tab-count{background:#fff}
.tab-create{
  margin-left:auto; background:none; border:1px dashed var(--tangerine); color:var(--tangerine-d);
  padding:8px 14px; border-radius:999px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.tab-create:hover{background:#FFF0ED}

/* ---------- badges PICUSTOM ---------- */
.badge{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em;
  padding:1px 7px; border-radius:999px; background:var(--lilas); color:var(--navy); margin-left:4px;
}
.badge-o{background:var(--turquoise)}

/* ---------- état vide (PICUSTOM) ---------- */
.empty{padding:40px 24px; text-align:center}
.empty-mark{
  display:inline-block; width:46px; height:46px; border-radius:12px; margin-bottom:14px;
  background:
    radial-gradient(circle at 50% 0,transparent 6px,var(--turquoise) 6px) top/50% 50% no-repeat,
    var(--lilas);
  box-shadow:inset 0 0 0 2px #fff;
}
.empty-title{font-family:var(--display); font-size:18px; font-weight:800; color:var(--ink); margin:0 0 6px}
.empty-sub{font-size:13px; color:var(--grey); margin:0 auto 18px; max-width:34ch; line-height:1.5}
.primary.compact{width:auto; margin:0; padding:11px 18px; background:var(--tangerine)}
.primary.compact:hover:not(:disabled){background:var(--tangerine-d)}

/* ---------- avertissements ---------- */
.warns{
  color:#8A5A00; background:#FFF6E5; border:1px solid #F3E0B0; border-radius:10px;
  padding:10px 12px; font-size:12.5px; margin-top:10px; line-height:1.5;
}

/* ---------- MODAL ---------- */
.modal-backdrop[hidden]{display:none}       /* l'attribut hidden doit primer */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,39,59,.45); backdrop-filter:blur(2px);
  display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:50;
  overflow:auto;
}
.modal{
  position:relative; width:100%; max-width:520px; background:var(--panel);
  border-radius:20px; box-shadow:0 24px 64px rgba(10,39,59,.25); padding:28px;
}
.modal-x{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink-soft); font-size:18px;
  line-height:1; cursor:pointer;
}
.modal-x:hover{background:var(--line-soft)}
.modal-title{font-family:var(--display); font-size:22px; font-weight:800; margin:2px 0 18px; letter-spacing:-.01em}
.modal.modal-lg{max-width:760px}
.modal-sub{margin:-12px 0 14px; color:var(--ink-soft); font-size:13.5px}
/* Vignette d'un PICORPO dans la liste de commande : le produit se reconnaît
   à sa boîte, pas à son code. */
.prod-vign{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;
  border:1px solid var(--line);background:#fff;margin-right:9px}
.prod-ligne{display:flex;align-items:center}
.prod-ligne .prod-txt{min-width:0}
.steps{display:flex; gap:8px; list-style:none; padding:0; margin:0 0 22px}
.step{
  flex:1; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--grey); border-top:3px solid var(--line); padding-top:8px; display:flex; align-items:center; gap:6px;
}
.step span{
  display:inline-grid; place-items:center; width:18px; height:18px; border-radius:999px;
  background:var(--line); color:#fff; font-size:11px;
}
.step.is-active{color:var(--tangerine-d); border-top-color:var(--tangerine)}
.step.is-active span{background:var(--tangerine)}
.pane-q{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 14px}
.choice2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.choice{
  display:flex; flex-direction:column; gap:5px; text-align:left; padding:16px;
  border:1.5px solid var(--line); border-radius:14px; background:var(--paper); cursor:pointer; font:inherit;
  transition:border-color .15s, background .15s;
}
.choice:hover{border-color:var(--tangerine)}
.choice.sel{border-color:var(--tangerine); background:#FFF0ED}
.choice-t{font-weight:800; font-size:15px; color:var(--ink)}
.choice-s{font-size:12px; color:var(--grey)}
.choice-ico{font-size:26px; line-height:1; color:var(--navy)}
.link-back{background:none; border:0; color:var(--ink-soft); font:inherit; font-size:13px; cursor:pointer; margin-top:16px; padding:6px 0}
.link-back:hover{color:var(--ink)}
.field{margin-bottom:14px}
.field label{display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:6px}
.field .opt{font-weight:500; color:var(--grey)}
.field input[type=text]{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); font:inherit; color:var(--ink);
}
.field input[type=file]{width:100%; font:inherit; font-size:13px; color:var(--ink-soft)}
.btn-rot{
  margin-top:8px; background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:7px 12px; border-radius:9px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}
.btn-rot:hover{border-color:var(--tangerine); color:var(--tangerine-d)}
.btn-rot.actif{border-color:var(--tangerine); background:#FFF0ED; color:var(--tangerine-d)}
.field input:focus{outline:2px solid var(--tangerine); outline-offset:1px; border-color:transparent}
.field-code{font-family:var(--mono); font-size:12px; color:var(--cyan-deep); margin:8px 0 0}
.field-code.bad{color:var(--saumon)}
.fmt-check{display:flex; gap:8px}
.fcheck{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:10px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper);
  font-weight:700; color:var(--ink); font-size:14px; user-select:none;
}
.fcheck:hover{border-color:var(--tangerine)}
.fcheck:has(input:checked){border-color:var(--tangerine); background:#FFF0ED; color:var(--tangerine-d)}
.fcheck input{width:16px; height:16px; accent-color:var(--tangerine); cursor:pointer}
.fmt-choice{display:flex; gap:8px}
.fmt-choice button{
  flex:1; padding:10px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper);
  font:inherit; font-weight:700; color:var(--ink); cursor:pointer;
}
.fmt-choice button.sel{border-color:var(--tangerine); background:#FFF0ED; color:var(--tangerine-d)}
.hint-fmt{font-size:11.5px; color:var(--grey); margin:8px 0 0}
.apercu{margin:6px 0 14px}
.apercu-t{font-size:12px; font-weight:800; color:var(--ink-soft); margin:0 0 8px}
.apercu-box{
  display:flex; align-items:center; justify-content:center; min-height:150px;
  background:var(--paper); border:1px dashed var(--line); border-radius:12px; padding:10px;
}
.apercu-box img{max-width:100%; max-height:230px; border-radius:4px; box-shadow:0 4px 14px rgba(10,39,59,.12)}
.apercu-hint{font-size:12.5px; color:var(--grey); margin:0; text-align:center}
.apercu-hint.echec{color:var(--saumon); font-weight:700}
/* Bouton « Réessayer » de l'aperçu : visible SEULEMENT après un échec (jamais de
   spinner sans issue — l'aperçu se termine toujours par une image ou une raison). */
.btn-retry{
  background:var(--tangerine); border:0; color:#fff; padding:8px 14px; border-radius:9px;
  font:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
}
.btn-retry:hover{filter:brightness(.94)}

/* ---------- modal PICUSTOM : page unique (2 colonnes) + loupe ---------- */
.modal-pcu{width:95vw; max-width:1300px; max-height:90vh; overflow:auto}
.pcu-grid{display:grid; grid-template-columns:minmax(300px,400px) 1fr; gap:28px; align-items:start}
.pcu-form{min-width:0}
.pcu-form .field{margin-bottom:14px}
.pcu-preview{min-width:0}
.pcu-preview .apercu-t{font-size:13px}
.choice2.mini{gap:10px}
.choice2.mini .choice{padding:11px 13px; flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap}
.choice2.mini .choice-t{font-size:14px}
.choice2.mini .choice-s{font-size:11px; flex-basis:100%}
.choice2.mini .choice-ico{font-size:20px}
.choice[disabled]{opacity:.7; cursor:default}
.pcu-preview .apercu-box{
  position:relative; overflow:hidden; padding:0; min-height:62vh; background:#fff;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.pcu-preview .apercu-box img{
  max-height:none; max-width:100%; width:auto; height:auto; display:block; border-radius:0;
  box-shadow:none; cursor:crosshair;
}
.pcu-preview .apercu-hint{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:80%}
.pcu-preview .btn-retry{position:absolute; left:50%; top:calc(50% + 34px); transform:translateX(-50%); z-index:7}
.loupe{
  position:absolute; border-radius:50%; border:2px solid var(--navy);
  box-shadow:0 8px 26px rgba(10,39,59,.35), inset 0 0 0 1px rgba(255,255,255,.6);
  pointer-events:none; background-repeat:no-repeat; background-color:#fff; z-index:6;
}
@media (max-width:860px){
  .pcu-grid{grid-template-columns:1fr}
  .pcu-preview .apercu-box{min-height:340px}
}
.pcu-errs{color:var(--saumon); font-size:13px; background:#FEF3F4; border:1px solid #F3C9D8;
  border-radius:10px; padding:10px 12px; margin:4px 0 0}
.modal-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px}
.modal-actions .primary{width:auto; margin:0; flex:1; background:var(--tangerine)}
.modal-actions .primary:hover:not(:disabled){background:var(--tangerine-d)}

/* ---------- en-tête : réglages ---------- */
.top-right{display:flex; align-items:center; gap:12px}
.gear{
  display:inline-flex; align-items:center; gap:6px; background:var(--panel);
  border:1px solid var(--line); color:var(--ink); padding:7px 13px; border-radius:999px;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.gear:hover{border-color:var(--navy)}
/* Le lien vers l'Atelier Design PICO porte la même apparence que les boutons
   d'entête : c'est une action de même niveau, pas un lien secondaire. */
a.gear{text-decoration:none}
.gear span{font-size:14px}

/* ---------- modal réglages ---------- */
.reg-intro{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 20px}
.reg-block{margin-bottom:18px}
.reg-block > label{display:block; font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:8px}
.reg-row{display:flex; align-items:center; gap:10px}
.reg-path{
  flex:1; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; word-break:break-all; line-height:1.4;
}
.reg-row .ghost{white-space:nowrap; background:var(--navy); color:#fff; border-color:var(--navy)}
.reg-row .ghost:hover{background:#08344f}
.reg-status{font-size:12.5px; margin:8px 0 0; font-weight:600}
.reg-status.good{color:var(--cyan-deep)}
.reg-status.good::before{content:"✓ "}
.reg-status.bad{color:var(--saumon)}
.reg-status.bad::before{content:"⚠︎ "}
.reg-adv{margin:4px 0 8px; border-top:1px solid var(--line-soft); padding-top:12px}
.reg-adv summary{cursor:pointer; font-size:13px; font-weight:700; color:var(--ink-soft); list-style:none}
.reg-adv summary::-webkit-details-marker{display:none}
.reg-adv summary::before{content:"⌄ "; color:var(--grey)}
.reg-adv[open] summary::before{content:"⌃ "}
.reg-sub{font-size:11.5px; color:var(--ink-soft); margin:4px 0 0}
.reg-note{font-size:12px; color:var(--grey); text-align:center; margin:10px 0 4px}

/* ---------- écran Produits ---------- */
.modal-wide{width:95vw; max-width:1300px; max-height:90vh; overflow:auto}
/* rangées en COLONNES FIXES (alignées d'une rangée à l'autre) */
.prow.std, .prow.pcu, .prow.corb{display:grid; align-items:center; gap:12px}
.prow.std{grid-template-columns:minmax(140px,1fr) 250px 96px 92px}
.prow.pcu{grid-template-columns:30px minmax(140px,1fr) 86px 104px 42px 190px 96px 100px}
.prow.corb{grid-template-columns:minmax(140px,1fr) 110px}
.prow .pinfo{min-width:0}
.prow .pinfo .code, .prow .pinfo .ptitre{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .pnote{margin-top:3px; font-size:11px; line-height:1.35; color:var(--tangerine-d);
  white-space:normal; word-break:break-word}
.prow .pnote::before{content:"⚠︎ "}
.prow .pchips{display:flex; gap:6px; flex-wrap:nowrap; overflow:hidden}
.prow .pchips-2{display:flex; flex-direction:column; gap:4px; min-width:0}
.prow .pchip-row{display:flex; align-items:center; gap:8px}
.prow .pchip-lbl{width:70px; flex:none; font-size:11px; color:#6b7280; text-align:right}
.prow .pchip-note{font-size:10.5px; color:var(--tangerine-d); margin-left:6px}
.prow .badge{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center}
.prow .fav-star{justify-self:center}
.prow .pbtn{white-space:nowrap}
.prod-tabs{display:flex; gap:8px; margin:4px 0 16px; border-bottom:1px solid var(--line); padding-bottom:12px}
.ptab{
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:7px 14px; border-radius:999px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.ptab:hover{border-color:var(--grey)}
.ptab.is-active{background:var(--navy); color:#fff; border-color:var(--navy)}
.ptab-corb{margin-left:auto}
.pbtn.maj{border-color:var(--turquoise); color:var(--cyan-deep); font-weight:700}
.pbtn.maj:hover{background:#EAF7F1}
.maj-info{font-size:12px; color:var(--cyan-deep); margin:0 0 12px; font-weight:600}
.fav-star{
  background:none; border:0; cursor:pointer; font-size:15px; line-height:1;
  color:var(--grey); padding:0 4px 0 0; vertical-align:baseline;
}
.fav-star.on{color:#F2B705}
.fav-star:hover{color:#F2B705}
.prow .fav-star{font-size:18px; padding:0 6px 0 0}
.pdl{position:relative; display:inline-flex}
.pdl-btn{
  background:none; border:1px solid var(--line); color:var(--ink-soft); cursor:pointer;
  width:26px; height:26px; border-radius:8px; font-size:14px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.pdl-btn:hover{border-color:var(--tangerine); color:var(--tangerine-d); background:#FFF0ED}
.dl-menu[hidden]{display:none}            /* l'attribut hidden doit primer */
.dl-menu{
  position:absolute; top:30px; left:0; z-index:8; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 10px 26px rgba(10,39,59,.18); padding:5px; display:flex;
  flex-direction:column; gap:2px; min-width:96px;
}
.dl-menu button{
  background:none; border:0; text-align:left; padding:7px 10px; border-radius:7px;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--ink); cursor:pointer;
}
.dl-menu button:hover{background:var(--paper); color:var(--tangerine-d)}
/* Menu SORTI DU FLUX (déplacé dans <body> à l'ouverture) : plus aucun
   overflow:hidden/auto de conteneur ne peut le couper. Les coordonnées sont
   posées en JS (cf. placerMenu), avec bascule vers le haut si besoin. */
.dl-menu.dl-menu--flottant{
  position:fixed; top:0; left:0; z-index:1000;
  max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); overflow:auto;
}
.dl-menu button{white-space:nowrap}
.prod-list{display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto}
.prow{
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper);
}
.prow.arch{opacity:.6}
.pinfo{flex:1; min-width:0}
.pinfo .code{font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--ink)}
.pinfo .ptitre{font-size:13px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pchips{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.chip{
  font-family:var(--mono); font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
}
.chip.on{background:#EAF7F1; color:#2C7A5E; border:1px solid var(--turquoise)}
.chip.off{background:#FBEDEE; color:#B4453F; border:1px solid #F3C9D8}
.prod-vide{color:var(--grey); font-size:13px; text-align:center; padding:28px 10px}
.titre-edit{display:flex; align-items:center; gap:6px; margin-top:4px}
.titre-edit input{
  flex:1; padding:6px 9px; border:1px solid var(--tangerine); border-radius:8px;
  font:inherit; font-size:13px; color:var(--ink); background:#fff;
}
.titre-edit input:focus{outline:2px solid var(--tangerine); outline-offset:1px; border-color:transparent}
.pact{display:flex; gap:6px}
.pbtn{
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:6px 11px; border-radius:8px; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.pbtn:hover{border-color:var(--navy); color:var(--ink)}
.pbtn.danger:hover{border-color:var(--saumon); color:var(--saumon)}

/* ---------- page de connexion ---------- */
.login-body{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--paper); padding:24px}
.login-card{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow); padding:34px 30px; text-align:center;
}
.login-card .mark{margin:0 auto 14px}
.login-brand{font-size:30px; margin:0}
.login-sub{color:var(--grey); font-size:13px; margin:2px 0 22px}
.login-form{display:flex; flex-direction:column; gap:6px; text-align:left}
.login-form label{font-size:12px; font-weight:700; color:var(--ink-soft); margin-top:8px}
.login-form input{
  padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font:inherit; color:var(--ink);
}
.login-form input:focus{outline:2px solid var(--tangerine); outline-offset:1px; border-color:transparent}
.login-form .primary{margin-top:16px}
.login-err{
  background:#FEF3F4; border:1px solid #F3C9D8; color:var(--saumon); border-radius:10px;
  padding:10px 12px; font-size:13px; margin:0 0 16px;
}
.badge-test{
  display:inline-block; background:var(--tangerine); color:#fff; font-weight:800; font-size:11px;
  letter-spacing:.06em; padding:1px 8px; border-radius:999px;
}

/* ---------- en-tête : déconnexion ---------- */
.logout{
  display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line);
  color:var(--ink-soft); padding:7px 13px; border-radius:999px; font:inherit; font-size:13px;
  font-weight:700; cursor:pointer; text-decoration:none;
}
.logout:hover{border-color:var(--saumon); color:var(--saumon)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .grid{grid-template-columns:1fr}
  .plates{position:static; max-height:none; overflow-y:visible}
  .params-grid{grid-template-columns:1fr 1fr}
  .h-lead{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}


/* ============ MOCKUP BOÎTE 3D (§[3]) ============================== */
/* L'icône vit dans la même cellule que le téléchargement : une rangée
   produit garde exactement deux affordances, jamais trois colonnes. */
.mk-btn{position:relative}
.mk-btn.vide{color:var(--ink-soft)}          /* aucun mockup encore : icône creuse */
.mk-btn.plein{border-color:var(--tangerine); color:var(--tangerine-d); background:#FFF0ED}
.mk-btn:disabled{opacity:.35; cursor:not-allowed}
.mk-btn:disabled:hover{border-color:var(--line); color:var(--ink-soft); background:none}
/* Pastille « à régénérer » : la fiche a changé depuis la génération. */
.mk-btn .mk-dot{
  position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%;
  background:#F2B705; border:1.5px solid #fff;
}
.modal-mk{width:min(96vw,1080px); max-height:92vh; overflow:auto}
.mk-sub{margin:-10px 0 14px; font-size:13px; color:var(--ink-soft)}
.mk-box{min-height:340px; position:relative; overflow:hidden}
.mk-box img{max-width:100%; max-height:64vh; display:block; margin:0 auto}
/* Génération/régénération (§[3]) : overlay CENTRÉ par-dessus l'image (qui reste
   en place, jamais vidée) — fond semi-opaque + spinner, comme .pcu-preview. */
.mk-box .apercu-hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0;
  max-width:80%; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:16px 20px; border-radius:12px; background:rgba(250,246,243,.92);
  box-shadow:0 4px 14px rgba(10,39,59,.12); z-index:5;
}
.mk-box .apercu-hint::before{
  content:""; width:22px; height:22px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--tangerine);
  animation:mk-spin .8s linear infinite;
}
.mk-box .apercu-hint.echec::before{display:none}
.mk-box .btn-retry{position:absolute; left:50%; top:calc(50% + 58px); transform:translateX(-50%); z-index:6}
@keyframes mk-spin{to{transform:rotate(360deg)}}
.mk-actions{justify-content:flex-start}
.mk-actions .ghost{
  width:auto; margin:0; padding:12px 18px; border-radius:12px; font:inherit; font-weight:800;
  background:none; border:1px solid var(--line); color:var(--ink); cursor:pointer;
}
.mk-actions .ghost:hover:not(:disabled){border-color:var(--tangerine); color:var(--tangerine-d)}
.mk-actions .ghost:disabled{opacity:.4; cursor:not-allowed}

/* Rapport du dieline dans les Réglages : replié par défaut — on veut d'abord
   le verdict (✓/⚠/✗), le détail seulement si on le demande. */
.reg-rapport{margin-top:6px}
.reg-rapport summary{cursor:pointer;font-size:12.5px;color:var(--ink-soft)}
.reg-rapport pre{white-space:pre-wrap;font-size:11.5px;line-height:1.45;margin:6px 0 0;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  max-height:180px;overflow:auto}

/* ===========================================================================
   ONGLET MOCKUPS — produits × formats, une carte par mockup
   L'écran doit tenir en une vue : la liste à gauche (on y cherche et on y
   coche), les réglages à droite (formats, style, Générer), et la grille des
   vignettes dessous. Pas d'accordéon : on doit voir CE QU'ON A DEMANDÉ en
   même temps que CE QU'ON A REÇU.
   =========================================================================== */
.mko-barre{display:flex; gap:12px; align-items:center; margin:4px 0 12px}
.mko-rech{flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px}
.mko-check{display:flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap}
.mko-compte{font-size:12px; color:var(--grey); font-variant-numeric:tabular-nums; white-space:nowrap}

.mko-corps{display:grid; grid-template-columns:1fr 260px; gap:16px; align-items:start}
.mko-liste{max-height:34vh; overflow:auto; border:1px solid var(--line); border-radius:10px}
.mko-ligne{display:flex; align-items:center; gap:10px; padding:7px 10px;
  border-bottom:1px solid var(--line); font-size:13px}
.mko-ligne:last-child{border-bottom:0}
.mko-ligne:hover{background:#fafafa}
.mko-ligne .code{font-weight:600; min-width:110px}
.mko-ligne .titre{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--grey)}
.mko-ligne .fam{font-size:11px; padding:1px 6px; border-radius:99px; border:1px solid var(--line)}
.mko-ligne .dispo{font-size:11px; color:var(--grey); font-variant-numeric:tabular-nums}
.mko-vide{padding:14px; text-align:center; color:var(--grey); font-size:13px}

.mko-reglages{display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--line); border-radius:10px; padding:12px}
.mko-bloc{display:flex; flex-direction:column; gap:6px}
.mko-lbl{font-size:12px; color:var(--grey)}
.mko-formats{display:flex; gap:10px; flex-wrap:wrap}
.mko-formats label{display:flex; align-items:center; gap:5px; font-size:13px}
.mko-formats input:disabled + span{opacity:.4}
.mko-reglages select{padding:7px 8px; border:1px solid var(--line); border-radius:8px; font-size:13px}
.mko-prog{display:flex; flex-direction:column; gap:5px}
.mko-prog-barre{height:6px; border-radius:99px; background:#eee; overflow:hidden}
.mko-prog-barre span{display:block; height:100%; width:0; background:var(--navy); transition:width .2s}
.mko-prog em{font-size:12px; color:var(--grey); font-style:normal; font-variant-numeric:tabular-nums}

.mko-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px; margin-top:16px}
.mko-carte{border:1px solid var(--line); border-radius:10px; padding:8px; display:flex;
  flex-direction:column; gap:6px}
.mko-carte.err{border-color:#d33; background:#fff6f6}
.mko-carte .vign{height:150px; display:grid; place-items:center; background:#fafafa;
  border-radius:6px; overflow:hidden}
.mko-carte .vign img{max-width:100%; max-height:100%; object-fit:contain}
.mko-carte .att{font-size:12px; color:var(--grey)}
.mko-carte .nom{font-size:12px; font-weight:600}
.mko-carte .fmt{font-size:11px; color:var(--grey)}
.mko-carte .raison{font-size:11px; color:#a11; line-height:1.35}
.mko-carte .act{display:flex; gap:6px; flex-wrap:wrap}
.mko-carte .act a,.mko-carte .act button{font-size:11px; padding:3px 7px; border-radius:6px;
  border:1px solid var(--line); background:#fff; cursor:pointer; text-decoration:none; color:inherit}
.mko-carte .act a:hover,.mko-carte .act button:hover{border-color:var(--grey)}