@font-face{font-family:'Geist';font-weight:400;font-display:swap;src:url(/moteur/fonts/geist-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Geist';font-weight:500;font-display:swap;src:url(/moteur/fonts/geist-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Geist';font-weight:600;font-display:swap;src:url(/moteur/fonts/geist-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Geist';font-weight:700;font-display:swap;src:url(/moteur/fonts/geist-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Geist';font-weight:800;font-display:swap;src:url(/moteur/fonts/geist-latin-800-normal.woff2) format('woff2');}

/* Mêmes couleurs que le configurateur actuel (src/app.css). */
:root{
  --paper:#F4F8F7; --card:#FFFFFF; --sunken:#EEF3F2; --ink:#122032; --soft:#4A5A70; --faint:#8593A8;
  --line:#DCE5E3; --primary:#0EA5A0; --primary-deep:#0B7F7B; --primary-soft:#E2F5F4;
  --danger:#C73B3F; --warn:#9A5B05; --warn-soft:#FFF3DF;
  --panneau:400px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html,body{ height:100%; overflow:hidden; background:var(--paper); color:var(--ink); font-family:'Geist',system-ui,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
button:disabled{ cursor:not-allowed; }
input{ font:inherit; color:inherit; }
svg.ico{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }


/* ---------- Le panneau ---------- */
#panneau{ background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; position:relative; z-index:2; }
.entete{ padding:16px 20px 8px; }
.entete img{ height:34px; display:block; }
.champ-client{ display:block; padding:6px 20px 12px; }
.client-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:5px; }
.champ-client label{ display:block; font-size:12px; font-weight:600; color:var(--soft); }
#sauvegarde{ font-size:11.5px; font-weight:600; color:var(--faint); white-space:nowrap; }
#sauvegarde.ok{ color:var(--primary-deep); }
#sauvegarde.att{ color:var(--warn); }
#sauvegarde.err{ color:var(--danger); }
#sauvegarde .lien{ padding:0; font-size:11.5px; margin-left:4px; }
.client-ligne{ display:flex; gap:6px; }
.client-ligne .btn{ flex:none; padding:0 11px; }
.champ-client input{ flex:1; min-width:0; width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:10px; font-size:15px; font-weight:600; background:#fff; }
.champ-client input:focus{ outline:none; border-color:var(--primary); }

#onglets{ display:flex; gap:6px; padding:0 20px 12px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.onglet{ padding:7px 11px; border-radius:9px; background:var(--sunken); font-weight:600; font-size:13px; color:var(--soft); display:inline-flex; align-items:center; gap:6px; transition:background .15s, color .15s; }
.onglet:hover{ color:var(--ink); }
.onglet.on{ background:var(--ink); color:#fff; }
.onglet.plus{ background:none; border:1px dashed var(--line); color:var(--soft); }
.onglet.plus:hover{ border-color:var(--primary); color:var(--primary-deep); }
.onglet .pastille-ok{ width:6px; height:6px; border-radius:50%; background:var(--primary); }
.onglet .pastille-att{ width:6px; height:6px; border-radius:50%; background:#E38F0F; }

#contenu{ flex:1; overflow-y:auto; padding:14px 20px 20px; min-height:0; }
.bloc{ margin-bottom:18px; }
.bloc-titre{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12px; font-weight:600; color:var(--soft); margin-bottom:8px; }
.bloc-titre b{ color:var(--ink); font-weight:700; }
.ligne-nom{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.ligne-nom input{ flex:1; min-width:0; border:1px solid transparent; border-radius:8px; padding:5px 7px; margin-left:-7px; font-size:17px; font-weight:700; background:none; }
.ligne-nom input:hover{ border-color:var(--line); }
.ligne-nom input:focus{ outline:none; border-color:var(--primary); background:#fff; }
.icone{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:var(--faint); flex:none; }
.icone:hover{ background:var(--sunken); color:var(--ink); }
.icone.danger:hover{ background:#FDECEC; color:var(--danger); }
.icone:disabled{ opacity:.35; pointer-events:none; }

.segments{ display:inline-flex; background:var(--sunken); border-radius:9px; padding:3px; gap:2px; }
.segments.plein{ display:flex; }
.segments.plein button{ flex:1; }
.segments button{ padding:6px 12px; border-radius:7px; font-weight:600; font-size:13px; color:var(--soft); transition:background .15s, color .15s; }
.segments button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(18,32,50,.14); }
.segments button:disabled{ opacity:.4; }

/* La jauge des étages */
.jauge{ display:flex; gap:2px; height:11px; margin-top:2px; }
.jauge i{ flex:1; border-radius:3px; background:var(--sunken); transition:background .25s; }

/* Les Types de casier */
.types{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.type{ display:grid; grid-template-columns:52px 1fr; gap:8px; align-items:center; text-align:left; padding:8px; border:1px solid var(--line); border-radius:12px; background:#fff; transition:border-color .15s, box-shadow .15s, transform .15s; }
.type:hover:not(:disabled){ border-color:var(--primary); box-shadow:0 6px 18px -10px rgba(14,165,160,.6); transform:translateY(-1px); }
.type:disabled{ opacity:.42; }
.type svg{ width:52px; height:52px; display:block; }
.type b{ display:block; font-size:14px; font-weight:700; line-height:1.1; }
.type span{ display:block; font-size:11.5px; color:var(--soft); margin-top:2px; line-height:1.25; }

/* Les rangées */
.rangees{ display:flex; flex-direction:column; gap:4px; }
.rangee{ display:grid; grid-template-columns:16px 40px 1fr auto 28px; align-items:center; gap:7px; padding:5px 5px 5px 4px; border:1px solid var(--line); border-radius:10px; background:#fff; transition:border-color .12s, background .12s; cursor:grab; }
.rangee:hover, .rangee.on{ border-color:var(--primary); background:var(--primary-soft); }
.rangee.glisse{ opacity:.45; }
.poignee{ color:#B7C2CF; display:flex; }
.pil{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; padding:2px 6px; border-radius:6px; color:#fff; font-weight:700; font-size:12px; }
.rangee .et{ font-size:12.5px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rangee .nb{ font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.vide-ligne{ padding:14px 10px; text-align:center; border:1px dashed var(--line); border-radius:10px; color:var(--faint); font-size:13px; }
.lien{ color:var(--primary-deep); font-weight:600; font-size:12.5px; padding:6px 2px; }
.lien:hover{ text-decoration:underline; }

/* Les étapes d'un lieu */
.etape{ border:1px solid var(--line); border-radius:12px; padding:11px; margin-bottom:9px; background:#fff; }
.etape.manque{ border-color:#EFCB94; background:#FFFBF3; }
.etape-t{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; margin-bottom:9px; }
.etape-t i{ width:19px; height:19px; border-radius:50%; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.etape.manque .etape-t i{ background:#E38F0F; }
.etape-t i svg{ width:12px; height:12px; stroke-width:3; }
.modeles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:8px; }
.modele{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 4px 6px; border:1px solid var(--line); border-radius:9px; font-weight:600; font-size:12px; transition:border-color .15s, transform .15s; background:#fff; }
.modele:hover{ border-color:var(--primary); transform:translateY(-1px); }
.modele svg{ width:22px; height:46px; display:block; }
.cols{ display:flex; flex-direction:column; gap:4px; }
.col{ display:flex; align-items:center; gap:6px; padding:3px 3px 3px 9px; border:1px solid var(--line); border-radius:9px; font-size:13px; font-weight:600; transition:border-color .12s, background .12s; }
.col:hover{ border-color:var(--primary); background:var(--primary-soft); }
.col .tag{ font-size:11px; font-weight:600; color:var(--soft); background:var(--sunken); padding:2px 6px; border-radius:6px; }
.col .espace{ flex:1; }
.col .icone{ width:26px; height:26px; }
.col .icone.on{ color:var(--primary-deep); background:var(--primary-soft); }
.fleches{ display:flex; gap:4px; margin-top:8px; align-items:center; }
.fleches .lib{ font-size:12px; font-weight:600; color:var(--soft); margin-right:auto; }
.note-erreur{ font-size:12px; color:var(--warn); margin-top:7px; line-height:1.35; }
.bascule{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; font-weight:600; font-size:13px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.bascule:hover{ border-color:var(--primary); }
.bascule.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

#totaux{ border-top:1px solid var(--line); padding:12px 20px 14px; display:flex; align-items:center; gap:14px; background:#fff; }
.total-g{ font-size:27px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.total-l{ font-size:12px; color:var(--soft); font-weight:600; margin-top:2px; }
.total-etat{ margin-left:auto; font-size:12px; font-weight:600; padding:5px 10px; border-radius:20px; }
.total-etat.ok{ background:var(--primary-soft); color:var(--primary-deep); }
.total-etat.att{ background:var(--warn-soft); color:var(--warn); }

/* ---------- La scène ---------- */
/* Un fond de studio sans horizon : le même dégradé clair que les rendus. */
#scene{ position:relative; min-width:0; overflow:hidden; background:
  radial-gradient(90% 62% at 50% 74%, #F7F8F9 0%, rgba(247,248,249,0) 70%),
  linear-gradient(180deg, #C9CFD4 0%, #DADEE2 44%, #E9ECEE 66%, #DDE1E4 100%); }
#toile{ position:absolute; inset:0; }
#toile canvas{ display:block; width:100%; height:100%; touch-action:none; outline:none; }
#reperes{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.repere{ position:absolute; left:0; top:0; pointer-events:auto; display:inline-flex; align-items:center; gap:6px; margin-top:-11px; margin-left:12px; padding:2px 8px 2px 2px; border-radius:7px; background:rgba(255,255,255,.88); backdrop-filter:blur(6px); box-shadow:0 2px 10px -3px rgba(18,32,50,.35); font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; will-change:transform; transition:background .12s; }
.repere::before{ content:''; position:absolute; left:-12px; top:50%; width:12px; height:1px; background:rgba(18,32,50,.4); }
.repere:hover{ background:#fff; }
/* À gauche du tambour (un voisin est collé à droite) : l'étiquette part vers la gauche, son trait à droite. */
.repere.gauche{ margin-left:-12px; translate:-100% 0; }
.repere.gauche::before{ left:auto; right:-12px; }
.repere .pil{ min-width:30px; padding:1px 5px; font-size:11px; }
.repere.colonne{ margin-left:0; margin-top:0; padding:3px 8px; transform-origin:center; translate:-50% -100%; }
.repere.colonne::before{ display:none; }

#infobulle{ position:absolute; left:0; top:0; pointer-events:none; background:var(--ink); color:#fff; font-size:12.5px; font-weight:500; padding:7px 10px; border-radius:9px; white-space:nowrap; box-shadow:0 8px 24px -8px rgba(18,32,50,.6); line-height:1.35; z-index:3; }
#infobulle b{ font-weight:700; }

#photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 1.2s ease; z-index:1; pointer-events:none; }
#photo.vue{ opacity:1; }

#commandes{ position:absolute; left:50%; bottom:20px; translate:-50% 0; display:flex; align-items:center; gap:8px; z-index:4; background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.3); border:1px solid rgba(255,255,255,.7); border-radius:15px; padding:6px; box-shadow:0 14px 40px -14px rgba(18,32,50,.45); white-space:nowrap; }
.cmd{ display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:10px; font-weight:600; font-size:13px; color:var(--soft); transition:background .15s, color .15s; }
.cmd:hover{ background:rgba(18,32,50,.06); color:var(--ink); }
.cmd.on{ background:var(--ink); color:#fff; }
.sep{ width:1px; height:22px; background:rgba(18,32,50,.13); }
.cmd.photo{ background:var(--primary); color:#fff; }
.cmd.photo:hover{ background:var(--primary-deep); color:#fff; }
.cmd.photo[disabled]{ background:var(--primary-deep); }

#photo-etat{ position:absolute; top:18px; left:50%; translate:-50% 0; z-index:4; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.9); backdrop-filter:blur(12px); padding:8px 8px 8px 14px; border-radius:12px; box-shadow:0 10px 30px -12px rgba(18,32,50,.5); font-weight:600; font-size:13px; }
#photo-etat .barre{ width:150px; height:5px; border-radius:3px; background:var(--sunken); overflow:hidden; }
#photo-etat .barre i{ display:block; height:100%; width:0; background:var(--primary); border-radius:3px; transition:width .5s; }
#photo-etat a, #photo-etat button{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:var(--sunken); color:var(--ink); font-weight:600; font-size:12.5px; text-decoration:none; }
#photo-etat a:hover, #photo-etat button:hover{ background:var(--line); }

#depart{ position:absolute; inset:0; background:#E2E6E9; z-index:5; pointer-events:none; opacity:1; transition:opacity 1s ease; }
#depart.fini{ opacity:0; }

@media (max-width:1100px){ :root{ --panneau:340px; } .cmd span{ display:none; } }


/* ---------- Les étapes ---------- */
#etapes{ display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; padding:0 14px 10px; }
.etape-b{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 0 6px; border-radius:9px; font-size:11px; font-weight:600; color:var(--soft); transition:background .15s, color .15s; }
.etape-b svg.ico{ width:18px; height:18px; }
.etape-b:hover{ background:var(--sunken); color:var(--ink); }
.etape-b.on{ background:var(--ink); color:#fff; }
.point{ position:absolute; top:5px; right:calc(50% - 15px); width:7px; height:7px; border-radius:50%; background:transparent; }
.point.ok{ background:var(--primary); }
.point.att{ background:#E38F0F; }
.point.err{ background:var(--danger); }
.etape-b.on .point{ box-shadow:0 0 0 1.5px var(--ink); }
#onglets{ border-top:1px solid var(--line); padding-top:12px; }

/* ---------- Les boutons et les petits éléments ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 13px; border-radius:10px; border:1px solid var(--line); background:#fff; font-weight:600; font-size:13px; transition:border-color .15s, background .15s, color .15s; white-space:nowrap; }
.btn:hover:not(:disabled){ border-color:var(--primary); color:var(--primary-deep); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.primaire{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.primaire:hover:not(:disabled){ background:var(--primary-deep); border-color:var(--primary-deep); color:#fff; }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.danger:hover:not(:disabled){ background:#A92F33; border-color:#A92F33; color:#fff; }
.btn.large{ width:100%; }
.btn.gros{ padding:13px 16px; font-size:15px; }
.deux{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.actions-bloc .deux .btn{ padding:8px 6px; font-size:12.5px; }
.petit{ font-size:12px; color:var(--soft); line-height:1.4; }
.petit.garde{ padding:10px 12px; background:var(--sunken); border-radius:10px; }
.note{ font-size:12.5px; line-height:1.35; padding:8px 11px; border-radius:9px; background:var(--sunken); margin-top:8px; font-weight:500; }
.note.att{ background:var(--warn-soft); color:var(--warn); }
.note.err{ background:#FDECEC; color:var(--danger); }
.lien{ background:none; }
.puces{ display:flex; flex-wrap:wrap; gap:6px; }
.puce{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:20px; font-size:12.5px; font-weight:600; color:var(--soft); background:var(--sunken); transition:background .15s, color .15s; }
.puce b{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.puce:hover{ color:var(--ink); }
.puce.att{ background:var(--warn-soft); color:var(--warn); }
.puce.att b{ color:var(--warn); }
.puce.on{ background:var(--ink); color:#fff; }
.puce.on b{ color:#fff; }
.depot{ display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; padding:16px 10px; border:1.5px dashed #BFCBD0; border-radius:12px; color:var(--soft); font-weight:600; font-size:13.5px; transition:border-color .15s, color .15s, background .15s; }
.depot svg.ico{ width:22px; height:22px; margin-bottom:3px; }
.depot small{ font-size:11.5px; font-weight:500; color:var(--faint); }
.depot:hover{ border-color:var(--primary); color:var(--primary-deep); background:var(--primary-soft); }
.orphelines{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-bottom:6px; }
.orpheline{ position:relative; aspect-ratio:1; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:grab; display:flex; align-items:center; justify-content:center; padding:3px; }
.orpheline img{ max-width:100%; max-height:100%; pointer-events:none; }
.orpheline .retire{ position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%; background:var(--ink); color:#fff; display:none; align-items:center; justify-content:center; }
.orpheline .retire svg{ width:10px; height:10px; }
.orpheline:hover .retire{ display:flex; }
.familles{ display:flex; flex-direction:column; gap:4px; }
.famille{ display:grid; grid-template-columns:34px 1fr auto 28px; align-items:center; gap:7px; padding:3px 3px 3px 4px; border:1px solid var(--line); border-radius:9px; }
.fam-img{ width:34px; height:34px; border-radius:7px; overflow:hidden; background:var(--sunken); display:flex; align-items:center; justify-content:center; color:var(--faint); }
.fam-img img{ width:100%; height:100%; object-fit:cover; }
.famille input{ min-width:0; width:100%; border:1px solid transparent; border-radius:6px; padding:4px 5px; font-size:12.5px; font-weight:600; background:none; }
.famille input:hover{ border-color:var(--line); }
.famille input:focus{ outline:none; border-color:var(--primary); }
.famille .nb, .profil .nb{ font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--soft); }
.chiffres{ display:flex; gap:8px; margin-bottom:16px; }
.chiffres > div{ flex:1; background:var(--sunken); border-radius:10px; padding:9px 10px; }
.chiffres b{ display:block; font-size:18px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.chiffres span{ font-size:11.5px; font-weight:600; color:var(--soft); }
.chiffres.grands b{ font-size:27px; letter-spacing:-.02em; }
.badges{ display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
.badge-l{ display:flex; align-items:center; justify-content:space-between; padding:2px 3px 2px 10px; border:1px solid var(--line); border-radius:9px; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.ajout-badge{ display:flex; gap:6px; }
.ajout-badge input, .champ-select{ flex:1; min-width:0; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; font:inherit; font-size:13px; }
.ajout-badge input:focus, .champ-select:focus{ outline:none; border-color:var(--primary); }
.ajout-badge .btn{ padding:0 10px; }
.profils{ display:flex; flex-direction:column; gap:4px; }
.profil{ display:grid; grid-template-columns:1fr auto 8px 28px; align-items:center; gap:7px; padding:3px 3px 3px 5px; border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.profil input{ min-width:0; width:100%; border:1px solid transparent; border-radius:6px; padding:5px; font-size:13px; font-weight:600; background:none; cursor:pointer; }
.profil input:focus{ outline:none; border-color:var(--primary); cursor:text; background:#fff; }
.profil.on{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.profil i{ width:7px; height:7px; border-radius:50%; }
.pastille-ok{ background:var(--primary); }
.pastille-att{ background:#CBD5DA; }
.pastille-err{ background:var(--danger); }

/* ---------- Les pages ---------- */
#page{ position:absolute; inset:0; z-index:6; background:var(--paper); display:flex; flex-direction:column; min-height:0; }
.page-tete{ display:flex; align-items:center; gap:14px; padding:18px 24px 12px; flex:none; }
.page-tete h1{ font-size:21px; font-weight:800; letter-spacing:-.015em; }
.compte{ color:var(--soft); font-weight:600; font-size:13px; }
.chercher{ margin-left:auto; display:flex; align-items:center; gap:7px; padding:0 11px; height:36px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--faint); width:240px; }
.chercher.large{ width:100%; margin:0; }
.chercher input{ flex:1; min-width:0; border:0; outline:0; background:none; font-size:13px; color:var(--ink); }
.chercher:focus-within{ border-color:var(--primary); }
.page-table{ flex:1; min-height:0; margin:0 24px 20px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.tv{ height:100%; overflow:auto; position:relative; }
.tv-tete{ position:sticky; top:0; z-index:2; display:grid; background:#fff; border-bottom:1px solid var(--line); font-size:11.5px; font-weight:700; color:var(--soft); }
.tv-tete > div{ padding:10px 9px; white-space:nowrap; }
.tv-tete > div.aide, .tb th[title]{ cursor:help; text-decoration:underline dotted; text-underline-offset:3px; }
.tv-corps{ position:relative; }
.tv-ligne{ position:absolute; left:0; right:0; display:grid; border-bottom:1px solid #EEF2F1; align-items:center; }
.tv-ligne:hover{ background:#FAFCFB; }
.tv-ligne.survol{ background:var(--primary-soft); box-shadow:inset 0 0 0 1.5px var(--primary); }
.tv-c{ height:100%; display:flex; align-items:center; padding:0 3px; min-width:0; font-size:13px; }
.tv-c input, .tv-c select{ width:100%; min-width:0; height:30px; padding:0 6px; border:1px solid transparent; border-radius:7px; background:none; font:inherit; font-size:13px; text-overflow:ellipsis; }
.tv-c select{ cursor:pointer; }
.tv-c input:hover, .tv-c select:hover{ border-color:var(--line); background:#fff; }
.tv-c input:focus, .tv-c select:focus{ outline:none; border-color:var(--primary); background:#fff; }
.tv-c input.droite{ text-align:right; font-variant-numeric:tabular-nums; }
.tv-c.err input, .tv-c.err select{ background:#FDECEC; color:var(--danger); }
.tv-c.att input, .tv-c.att select{ background:var(--warn-soft); }
.tv-lu{ padding:0 9px; color:var(--soft); font-weight:600; font-variant-numeric:tabular-nums; }
.tv-suppr .icone{ opacity:0; }
.tv-ligne:hover .tv-suppr .icone{ opacity:1; }
.tv-photo{ justify-content:center; }
.vignette{ width:44px; height:44px; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:2px; color:var(--faint); overflow:hidden; }
.vignette img{ max-width:100%; max-height:100%; }
.vignette.vide{ background:var(--sunken); border-style:dashed; }
.vignette:hover{ border-color:var(--primary); color:var(--primary-deep); }
.mini{ width:32px; height:32px; flex:none; border-radius:6px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:1px; overflow:hidden; margin-right:9px; }
.mini img{ max-width:100%; max-height:100%; }
.mini.vide{ background:var(--sunken); border-style:dashed; }
.nom-art{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-ligne.groupe{ background:var(--sunken); }
.groupe-t{ font-weight:700; font-size:12.5px; padding-left:6px; }
.groupe-n{ margin-left:8px; color:var(--faint); font-weight:600; font-size:12px; }
.tv-vide{ padding:60px 20px; }
.vide-page{ text-align:center; padding:60px 20px; color:var(--soft); display:flex; flex-direction:column; align-items:center; gap:8px; }
.vide-page svg.ico{ width:34px; height:34px; color:var(--faint); }
.vide-page .vide-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.vide-page h2{ font-size:17px; color:var(--ink); font-weight:700; }
.vide-page .btn{ margin-top:8px; }

/* ---------- Le chargement ---------- */
.ligne-recherche{ margin-bottom:8px; }
.deux-puces{ display:flex; gap:6px; margin-bottom:9px; }
.puce.gomme{ margin-left:auto; }
.puce.gomme svg{ width:14px; height:14px; }

/* ---------- L'envoi ---------- */
.envoi{ flex:1; min-height:0; overflow:auto; padding:4px 24px 24px; display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:14px; align-items:start; }
.envoi-g, .envoi-d{ display:flex; flex-direction:column; gap:14px; }
.carte{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.carte.prete{ border-color:var(--primary); box-shadow:0 10px 30px -18px rgba(14,165,160,.7); }
.carte h2{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; margin-bottom:10px; }
.carte .petit{ margin-bottom:10px; }
.carte .chiffres{ margin-bottom:12px; }
.carte > .note{ margin:0 0 12px; }
.pas-machine{ margin:14px 0 10px 19px; font-size:13px; line-height:1.75; color:var(--ink); }
.form{ display:flex; flex-direction:column; gap:8px; }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.form label span{ display:block; font-size:12px; font-weight:600; color:var(--soft); margin-bottom:3px; }
.form input{ width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:9px; font-size:13px; }
.form input:focus{ outline:none; border-color:var(--primary); }
.etape-diag{ margin-bottom:8px; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.etape-diag-t{ display:flex; align-items:center; gap:9px; width:100%; padding:10px 11px; font-weight:700; font-size:13px; text-align:left; }
.etape-diag-t:hover{ background:var(--sunken); }
.etape-diag-t span{ flex:1; }
.etape-diag-t i{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--primary); }
.etape-diag-t i svg{ width:11px; height:11px; stroke-width:3; }
.etape-diag.att .etape-diag-t i{ background:#E38F0F; }
.etape-diag.err .etape-diag-t i{ background:var(--danger); }
.diag-l{ display:block; width:100%; text-align:left; padding:6px 11px; font-size:12.5px; line-height:1.3; border-top:1px solid #EEF2F1; color:var(--warn); }
.diag-l.err{ color:var(--danger); font-weight:600; }
.diag-l:hover{ background:var(--sunken); }

/* ---------- Les boîtes de dialogue ---------- */
.voile{ position:fixed; inset:0; z-index:40; background:rgba(18,32,50,.42); display:flex; align-items:center; justify-content:center; padding:24px; }
.boite{ background:#fff; border-radius:16px; width:440px; max-width:100%; max-height:100%; display:flex; flex-direction:column; box-shadow:0 30px 80px -20px rgba(18,32,50,.55); }
.boite.large{ width:860px; }
.boite header{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px 10px; }
.boite h2{ font-size:16px; font-weight:700; }
.boite-corps{ padding:2px 18px 14px; overflow:auto; min-height:0; }
.boite footer{ display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--line); }
.texte-boite{ line-height:1.45; color:var(--soft); }
.champ-ligne{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--soft); }
.champ-ligne select, .champ-ligne input{ padding:6px 9px; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); background:#fff; }
.champ-ligne input{ width:70px; }
.import-grille{ display:grid; grid-template-columns:minmax(0, 1fr) 220px; gap:14px; }
.import-col{ border:1px solid var(--line); border-radius:11px; overflow:auto; max-height:52vh; }
table.import{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.import th{ position:sticky; top:0; background:#fff; text-align:left; padding:8px 9px; font-size:11.5px; color:var(--soft); border-bottom:1px solid var(--line); }
table.import td{ padding:4px 9px; border-bottom:1px solid #EEF2F1; }
table.import td.fort{ font-weight:600; white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
table.import td.ex{ color:var(--faint); max-width:210px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.import select{ width:100%; padding:5px 6px; border:1px solid var(--line); border-radius:7px; background:#fff; font:inherit; color:var(--soft); }
table.import tr.reconnue select{ border-color:var(--primary); color:var(--primary-deep); font-weight:600; background:var(--primary-soft); }
.import-nb{ font-size:38px; font-weight:800; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.import-nb-l{ font-size:12px; font-weight:600; color:var(--soft); margin:2px 0 6px; }
.mode{ margin-top:12px; }
.mode button{ padding:6px 4px; font-size:12px; }
.clients{ display:flex; flex-direction:column; gap:5px; }
.client-l{ display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:10px; padding-right:4px; }
.client-l.on{ border-color:var(--primary); background:var(--primary-soft); }
.client-n{ flex:1; min-width:0; text-align:left; padding:9px 11px; }
.client-n b{ display:block; font-size:13.5px; }
.client-n span{ font-size:12px; color:var(--soft); }

#messages{ position:fixed; left:50%; bottom:22px; translate:-50% 0; z-index:60; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
.message{ display:flex; align-items:center; gap:8px; padding:9px 13px; background:var(--ink); color:#fff; border-radius:10px; font-size:13px; font-weight:500; box-shadow:0 12px 30px -10px rgba(18,32,50,.6); animation:monte .22s ease-out; transition:opacity .3s; max-width:640px; }
.message.err{ background:var(--danger); }
.message.part{ opacity:0; }
@keyframes monte{ from{ transform:translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }

.champ-ligne.reappro{ margin-bottom:9px; }
.champ-ligne.reappro select{ flex:1; }

/* Une configuration validée : les machines ne changent plus. */
#contenu.fige > *:not(.bandeau-fige){ opacity:.5; pointer-events:none; }
/* Validée : seuls les casiers sont figés ; noms et stickers restent modifiables. */
#contenu.fige-materiel .materiel{ opacity:.45; pointer-events:none; }
.bandeau-fige{ display:flex; flex-direction:column; gap:8px; padding:11px 12px; margin-bottom:14px; background:var(--primary-soft); border-radius:11px; font-size:12.5px; font-weight:600; line-height:1.35; color:var(--primary-deep); }
.deconnexion{ margin-top:10px; }
.vider{ margin-top:6px; color:var(--danger); }
#depart.erreur{ display:flex; align-items:center; justify-content:center; padding:40px; text-align:center; font-weight:600; color:var(--danger); }


/* ================= LE STUDIO : la machine partout, le reste flotte ================= */
#scene{ position:fixed; inset:0; }
.haut, #feuille, #droite, #plan-zone{ --verre:rgba(255,255,255,.93); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3); border:1px solid rgba(255,255,255,.72); box-shadow:0 24px 60px -30px rgba(18,32,50,.5); }
.haut{ position:fixed; left:14px; right:14px; top:12px; height:56px; z-index:10; display:flex; align-items:center; gap:12px; padding:0 12px; background:rgba(255,255,255,.88); border-radius:16px; }
.haut .brand{ height:30px; display:block; flex:none; }
.haut .brand.brand-petit{ height:20px; }
.haut .brand-rev{ height:36px; border-radius:6px; }
.client-bloc{ display:flex; align-items:center; gap:6px; padding:3px 3px 3px 9px; border-radius:10px; background:var(--sunken); flex:none; }
.client-bloc input{ width:150px; border:0; background:none; font-weight:700; font-size:13.5px; outline:none; padding:5px 0; text-overflow:ellipsis; }
/* Le client et, dessous, son site : deux lignes dans la même place. */
.client-champs{ display:flex; flex-direction:column; }
.client-champs #client{ padding:2px 0 0; }
.client-champs #site{ font-size:11.5px; font-weight:600; color:var(--soft); padding:0 0 2px; }
.client-champs #site::placeholder{ font-weight:500; }
/* Le stickage : une ligne par zone de plastron, la couleur et la lettre du gabarit PDF. */
.stick-aide{ font-size:12px; line-height:1.4; color:var(--soft); margin:0 0 8px; }
.sticks{ display:flex; flex-direction:column; gap:5px; }
.stick{ display:flex; align-items:center; gap:8px; padding:6px 6px 6px 7px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.stick.cache{ opacity:.5; }
.stick-z{ flex:none; min-width:30px; height:24px; padding:0 5px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; color:#fff; background:var(--c); }
.stick-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.stick-t b{ font-size:12px; font-weight:600; line-height:1.25; }
.stick-t span{ font-size:11px; color:var(--soft); }
.stick-ph{ flex:none; width:34px; height:34px; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.stick-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.stick .btn.petit{ flex:none; padding:5px 8px; font-size:11.5px; }
.stick .btn.petit svg.ico{ width:13px; height:13px; }
/* La galerie des pictogrammes de familles : une catégorie à la fois. */
.pictos-tete{ margin-bottom:10px; }
.pictos-onglets{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.pictos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; max-height:52vh; overflow:auto; padding:2px; }
.picto{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px 8px; border:1px solid var(--line); border-radius:12px; background:#fff; transition:border-color .12s, box-shadow .12s; }
.picto:hover{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.picto.on{ border-color:var(--primary); background:var(--primary-soft); }
.picto img{ width:64px; height:64px; object-fit:contain; }
.picto span{ font-size:11.5px; font-weight:600; text-align:center; line-height:1.2; }
/* Régler un sticker : la fenêtre se range à gauche, sans voile, la machine reste visible et se manipule. */
.voile.reglage{ background:transparent; pointer-events:none; justify-content:flex-start; align-items:flex-start; padding:calc(var(--haut-bas, 68px) + 12px) 14px 14px 14px; }
.voile.reglage .boite{ pointer-events:auto; width:680px; max-width:calc(100vw - 28px); }
/* Régler un sticker : l'aperçu de la zone à gauche, les réglages à droite. */
.reg{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.reg-zone{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px; border-radius:12px; background:var(--sunken); }
.reg-zone canvas{ display:block; cursor:grab; touch-action:none; box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.12); }
.reg-zone canvas.tient{ cursor:grabbing; }
.reg-cotes{ font-size:11.5px; color:var(--soft); text-align:center; max-width:460px; }
.reg-cmd{ flex:1; min-width:230px; display:flex; flex-direction:column; gap:12px; }
.reg-l{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; }
.reg-l input[type=range]{ flex:1; }
.reg-l b{ min-width:44px; text-align:right; font-variant-numeric:tabular-nums; }
.reg-l input[type=color]{ width:44px; height:28px; padding:0; border:1px solid var(--line); border-radius:6px; background:#fff; }
.reg-b{ display:flex; gap:6px; flex-wrap:wrap; }
.reg-l input[type=color]:disabled{ opacity:.35; }
.reg-sans{ display:flex; align-items:center; gap:6px; font-weight:500; font-size:12px; color:var(--soft); cursor:pointer; }
.reg-mm{ font-size:12.5px; margin:0; }
.client-groupe{ display:flex; flex-direction:column; gap:4px; }
.client-groupe + .client-groupe{ margin-top:8px; }
.client-gt{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--ink); text-transform:uppercase; letter-spacing:.03em; padding:0 2px; }
.client-gt .lien{ margin-left:auto; text-transform:none; letter-spacing:0; font-size:12px; }
.client-n small{ display:block; font-size:11px; color:var(--soft); }
.clients-chercher{ margin-bottom:10px; }
#version{ font-size:11.5px; font-weight:600; color:var(--soft); white-space:nowrap; }
#mes-clients{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--soft); }
#mes-clients:hover{ background:#fff; color:var(--ink); }
#etapes{ flex:1; display:flex; justify-content:center; gap:2px; min-width:0; padding:0; }
.etape-b{ position:relative; flex-direction:row; gap:6px; padding:8px 10px; font-size:12.5px; white-space:nowrap; }
.etape-b svg.ico{ width:15px; height:15px; }
.etape-b .point{ position:static; flex:none; }
.etape-no{ font-style:normal; font-size:10.5px; font-weight:800; min-width:15px; height:15px; line-height:15px; text-align:center; border-radius:50%; background:var(--sunken); color:var(--soft); flex:none; }
.etape-b.on .etape-no{ background:rgba(255,255,255,.18); color:#fff; }
.etape-b.on .point{ box-shadow:none; }
#sauvegarde{ white-space:nowrap; }
#presenter{ flex:none; padding:8px 12px; }
/* --haut-bas : le bas de la barre du haut ; --reserve-droite : la colonne du remplissage réduit et des commandes (appli.js, ajusterHaut et ajusterReserve). */
#feuille{ position:fixed; left:14px; top:calc(var(--haut-bas, 68px) + 12px); bottom:14px; z-index:9; width:400px; max-width:calc(100vw - 28px - var(--reserve-droite, 0px)); display:grid; grid-template-columns:minmax(0, 1fr); background:var(--verre); border-radius:18px; overflow:hidden; }
#panneau{ background:none; border:0; min-height:0; display:flex; flex-direction:column; position:static; }
#onglets{ border:0; padding:14px 16px 10px; }
#contenu{ padding:6px 16px 16px; }
#totaux{ background:none; padding:10px 16px 12px; }
#page{ position:static; inset:auto; background:none; z-index:auto; min-height:0; min-width:0; }
#page[hidden]{ display:none !important; }
.page-tete{ padding:14px 18px 10px; flex-wrap:wrap; }
.page-tete .espace{ flex:1; }
.page-tete h1{ font-size:19px; }
.page-tete .chercher{ margin-left:auto; }
.page-tete .btn{ padding:8px 11px; font-size:12.5px; }
.page-table{ margin:0 18px 16px; }
.page-defile{ flex:1; min-height:0; overflow:auto; padding:0 18px 16px; }
body[data-etape="calcul"] #feuille{ width:900px; }
body[data-etape="stats"] #feuille{ width:940px; }
body[data-etape="articles"] #feuille, body[data-etape="salaries"] #feuille{ width:1120px; grid-template-columns:286px minmax(0, 1fr); }
body[data-etape="quotas"] #feuille{ width:1080px; grid-template-columns:286px minmax(0, 1fr); }
body[data-etape="envoi"] #feuille{ width:1100px; grid-template-columns:286px minmax(0, 1fr); }
body[data-etape="chargement"] #feuille{ width:392px; }
body[data-etape="articles"] #panneau, body[data-etape="salaries"] #panneau, body[data-etape="quotas"] #panneau, body[data-etape="envoi"] #panneau{ border-right:1px solid var(--line); }
#droite{ position:fixed; right:14px; top:calc(var(--haut-bas, 68px) + 12px); width:286px; z-index:8; padding:14px; background:rgba(255,255,255,.9); border-radius:18px; max-height:calc(100vh - var(--haut-bas, 68px) - 112px); overflow:auto; overflow-x:hidden; }
/* En entier, le libellé du chiffre passe à la ligne au lieu d'être coupé (« casiers remplis sur 340, colonnes comprises »). */
#droite:not(.compact) .d-t{ min-width:0; }
#droite:not(.compact) .d-t span{ display:block; white-space:normal; line-height:1.3; }
#droite.compact{ display:flex; align-items:center; gap:11px; width:auto; padding:9px 15px 9px 9px; }
#droite[hidden]{ display:none; }
.d-rempl{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.d-t b{ display:block; font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.d-t span{ font-size:11.5px; font-weight:600; color:var(--soft); white-space:nowrap; }
.d-sep{ height:1px; background:var(--line); margin:11px 0; }
#commandes{ left:auto; right:14px; bottom:14px; translate:0 0; gap:3px; padding:5px; }
#commandes .cmd{ padding:8px; }
#commandes[hidden]{ display:none; }
/* Hors des Machines, les commandes se rangent en colonne sous le remplissage réduit : le grand panneau garde sa largeur. */
body:not([data-etape="machines"]) #commandes{ flex-direction:column; }
body:not([data-etape="machines"]) #commandes .sep{ width:22px; height:1px; }
#depart{ z-index:30; position:fixed; }

/* Les chiffres */
.anneau{ position:relative; flex:none; }
.anneau svg{ width:100%; height:100%; display:block; }
.anneau-v{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.anneau-v b{ font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; font-size:28px; }
.anneau-v i{ font-style:normal; font-size:12px; font-weight:700; color:var(--soft); margin-left:1px; }
#droite.compact .anneau-v b{ font-size:17px; }
#droite.compact .anneau-v i{ font-size:9px; }
.jauges{ display:flex; flex-direction:column; gap:8px; }
.jauge-l{ display:grid; grid-template-columns:62px minmax(0, 1fr) auto; gap:9px; align-items:center; font-size:12.5px; }
.jauge-l.fam{ grid-template-columns:96px minmax(0, 1fr) 30px; }
.jauge-n{ font-weight:600; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.jauge-l b{ font-weight:700; font-variant-numeric:tabular-nums; font-size:12px; text-align:right; }
.jauge-l .pil{ min-width:0; justify-self:start; font-size:11px; padding:1px 7px; }
.barre{ display:block; height:7px; border-radius:4px; background:#E7EDEC; overflow:hidden; }
.barre i{ display:block; height:100%; border-radius:4px; transition:width .35s; }
.tuile{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:12px 13px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.tuile-i{ color:var(--primary-deep); margin-bottom:5px; display:flex; }
.tuile b{ font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tuile > span:last-child{ font-size:12px; font-weight:600; color:var(--soft); }
.tuile.alerte .tuile-i, .tuile.alerte b{ color:var(--warn); }
.coupe{ display:flex; flex-direction:column; gap:2px; flex:1; min-height:190px; }
.coupe-r{ display:grid; grid-template-columns:minmax(0, 1fr) 42px; gap:6px; min-height:14px; cursor:default; }
.coupe-b{ position:relative; background:#EDF2F1; border-radius:4px; overflow:hidden; display:flex; align-items:center; }
.coupe-f{ position:absolute; left:0; top:0; bottom:0; opacity:.92; transition:width .35s; }
.coupe-p{ position:relative; z-index:1; font-size:10.5px; font-weight:700; color:#fff; margin-left:7px; text-shadow:0 0 3px rgba(0,0,0,.25); }
.coupe-n{ align-self:center; text-align:right; font-size:10.5px; font-weight:700; color:var(--soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.coupe-r:hover .coupe-b{ outline:2px solid var(--ink); outline-offset:-1px; }
.auto{ display:flex; flex-direction:column; }
.auto-l{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #EEF2F1; font-size:12.5px; }
.auto-l:last-child{ border-bottom:0; }
.auto-n{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.auto-c{ font-size:10.5px; font-weight:700; color:var(--soft); background:var(--sunken); border-radius:4px; padding:0 5px; }
.auto-l b{ font-weight:700; min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }
.auto-l.bas b{ color:var(--warn); }
.reste{ display:flex; flex-direction:column; gap:2px; }
.reste-l{ display:grid; grid-template-columns:20px minmax(0, 1fr); align-items:center; column-gap:8px; text-align:left; padding:6px 7px; border-radius:9px; font-size:12.5px; transition:background .12s; }
.reste-l:hover{ background:var(--sunken); }
.reste-legende{ display:flex; gap:12px; padding:7px 7px 2px; font-size:11px; color:var(--soft); }
.reste-legende span{ display:flex; align-items:center; gap:5px; }
.reste-legende .point{ position:static; }
.reste-l i{ grid-row:span 2; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--primary); }
.reste-l i svg{ width:11px; height:11px; stroke-width:3; }
.reste-l.att i{ background:#E38F0F; }
.reste-l.err i{ background:var(--danger); }
.reste-l b{ font-weight:700; font-size:12px; }
.reste-l span{ grid-column:2; color:var(--soft); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Les statistiques */
.stats-g{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:10px; }
.stats-g .carte{ margin:0; }
.stats-g h2{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:11px; }
.stats-g h2 span{ font-weight:600; color:var(--soft); font-variant-numeric:tabular-nums; }
.c-rempl{ grid-column:span 7; } .c-types{ grid-column:span 5; }
.c-tuiles{ grid-column:span 12; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; }
.c-coupe{ grid-column:span 3; display:flex; flex-direction:column; } .c-auto{ grid-column:span 3; } .c-fam{ grid-column:span 3; }
.c-fam .jauge-l.fam{ grid-template-columns:86px minmax(0, 1fr) 26px; gap:6px; }
.c-auto .auto-n{ white-space:normal; line-height:1.15; }
.c-fam .jauge-n{ font-size:10.5px; }
.c-tuiles .tuile b{ font-size:18px; }
.rempl{ display:flex; align-items:center; gap:16px; }
.rempl-d{ flex:1; min-width:0; }

/* Le calcul */
.petit-champ{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--soft); }
.petit-champ select{ padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:#fff; font:inherit; color:var(--ink); }
.tb-defile{ overflow:auto; background:#fff; }
.tb{ width:100%; border-collapse:collapse; font-size:13px; }
.tb thead th{ position:sticky; top:0; z-index:1; background:#fff; text-align:left; font-size:11.5px; font-weight:700; color:var(--soft); padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tb thead th.d{ text-align:right; }
.tb td{ padding:5px 10px; border-bottom:1px solid #EEF2F1; white-space:nowrap; }
.tb tr:last-child td{ border-bottom:0; }
.tb tbody tr:hover td{ background:#F6FAF9; }
.tb .d{ text-align:right; font-variant-numeric:tabular-nums; }
.tb-n{ font-weight:600; max-width:300px; overflow:hidden; text-overflow:ellipsis; }
.tb-ph{ width:40px; padding-right:0 !important; }
.tb-ph .mini{ margin-right:0; width:30px; height:30px; }
/* Le type de casier : un menu blanc avec un liseré à sa couleur, pour ne pas ressembler à une erreur (le T6 est rouge). */
.tb-sel{ font:inherit; font-size:11.5px; font-weight:700; color:var(--ink); background:#fff; border:1px solid var(--line); border-left:5px solid var(--c); border-radius:6px; padding:3px 4px; cursor:pointer; }
.page-aide{ margin:0 24px 10px; font-size:12.5px; line-height:1.45; color:var(--soft); flex:none; }
.page-aide b{ color:var(--ink); }
.tb-sel.vide{ background:var(--warn-soft); color:var(--warn); }
.tb-sel option{ color:var(--ink); background:#fff; }
.tb-in{ width:54px; text-align:right; font:inherit; font-weight:700; font-variant-numeric:tabular-nums; padding:4px 6px; border:1px solid transparent; border-radius:7px; background:var(--sunken); }
.tb-in.large{ width:68px; font-weight:500; }
.tb-in:hover{ border-color:var(--line); }
.tb-in:focus{ outline:none; border-color:var(--primary); background:#fff; }
.tb-j{ font-weight:700; }
.tb-j.bas{ color:var(--warn); }
.tb-lu{ color:var(--soft); font-weight:600; }
.tb-lu.manque{ color:var(--warn); }

/* ---------------- Le chargement ---------------- */
body[data-etape="chargement"] #contenu{ display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; }
.c-actions{ display:grid; grid-template-columns:minmax(0, 1fr) 40px; gap:7px; margin-bottom:9px; flex:none; }
.c-actions .btn{ padding:9px 8px; }
.c-aide{ flex:none; margin-bottom:9px; border:1px solid var(--line); border-radius:11px; background:var(--sunken); font-size:12.5px; line-height:1.4; }
.c-aide summary{ cursor:pointer; padding:8px 11px; font-weight:700; color:var(--ink); }
.c-aide ol{ margin:0; padding:0 11px 0 28px; display:grid; gap:4px; }
.c-aide p{ margin:7px 11px 10px; color:var(--soft); }
.c-aide b{ color:var(--ink); font-weight:700; }
#contenu > .chercher{ flex:none; margin-bottom:8px; }
.deux-puces{ flex:none; }
.c-liste{ flex:1; min-height:0; overflow:auto; margin:0 -16px; padding:0 16px 14px; }
.art-g{ margin-bottom:10px; }
.art-gt{ position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:7px; padding:6px 0; background:rgba(255,255,255,.96); font-size:12px; font-weight:600; color:var(--soft); }
.art-gt .pil.att{ background:var(--warn-soft); color:var(--warn); }
.art{ display:grid; grid-template-columns:62px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:6px 9px 6px 6px; margin-bottom:5px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition:border-color .12s, background .12s, box-shadow .12s; }
.art:hover{ border-color:var(--primary); }
.art.on{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 1px var(--primary); }
.art-ph{ width:62px; height:62px; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--faint); }
.art-ph.vide{ background:var(--sunken); }
.art-ph img{ max-width:100%; max-height:100%; display:block; }
.art-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.art-n{ font-size:13.5px; font-weight:600; line-height:1.22; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.art-s{ font-size:11.5px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.art-b{ display:block; height:4px; border-radius:3px; background:#E7EDEC; overflow:hidden; margin-top:3px; }
.art-b i{ display:block; height:100%; background:var(--primary); transition:width .3s; }
.art-d{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.art-d b{ font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--primary-deep); white-space:nowrap; }
.art-d b.manque{ color:var(--warn); }
.art-d b.complet{ display:flex; align-items:center; gap:4px; }
.art-d b.complet svg.ico{ width:14px; height:14px; }
.art-placer{ font-size:11px; font-weight:700; color:#fff; background:var(--primary); padding:3px 8px; border-radius:7px; }
.art-placer:hover{ background:var(--primary-deep); }

#plan-zone{ position:fixed; left:420px; right:14px; bottom:14px; height:58vh; z-index:7; display:flex; flex-direction:column; background:rgba(255,255,255,.97); border-radius:18px; overflow:hidden; }
#plan-zone[hidden]{ display:none; }
body[data-vue-plan="plan"] #plan-zone{ height:calc(100vh - var(--haut-bas, 68px) - 26px); }
.pl-outils{ flex:none; display:flex; align-items:center; gap:7px; padding:8px 10px; border-bottom:1px solid var(--line); min-height:58px; }
.pl-actif{ display:flex; align-items:center; gap:9px; min-height:42px; padding:0 4px; border-radius:11px; min-width:0; flex:0 1 auto; max-width:300px; }
.pl-actif.on{ padding:3px 3px 3px 3px; background:var(--primary-soft); box-shadow:inset 0 0 0 1px var(--primary); }
.pl-actif.gomme{ background:var(--warn-soft); padding:3px 3px 3px 11px; }
.pl-actif-ph{ width:36px; height:36px; flex:none; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pl-actif-ph img{ max-width:100%; max-height:100%; }
.pl-actif-t{ min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.pl-actif-t b{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-actif-t span{ font-size:11.5px; font-weight:600; color:var(--soft); }
.pl-actif .btn{ padding:6px 9px; font-size:12px; }
.pl-info{ flex:1 1 0; font-size:12px; font-weight:600; color:var(--primary-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pl-outils .espace{ display:none; }
.pl-outils > .segments, .pl-outils > .icone-t, .pl-outils > .pl-compte, .pl-outils > .pl-sep{ flex:none; }
.pl-outils .segments button{ padding:5px 9px; font-size:12px; }
.icone-t{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; color:var(--soft); }
.icone-t:hover:not(:disabled){ background:var(--sunken); color:var(--ink); }
.icone-t:disabled{ opacity:.3; }
.icone-t.on{ background:var(--ink); color:#fff; }
.pl-sep{ width:1px; height:24px; background:var(--line); }
.pl-compte{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; padding-left:4px; white-space:nowrap; }
.pl-defile{ position:relative; flex:1; min-height:0; overflow:auto; }
.pl-g{ display:grid; gap:2px; padding:0 6px 6px 0; min-height:100%; width:100%; user-select:none; touch-action:none; }
.pl-g.lieu{ gap:3px; padding:0 10px 10px 8px; }
.pl-coin, .pl-col, .pl-rg, .pl-pc{ background:#fff; z-index:2; }
.pl-coin{ position:sticky; left:0; top:0; z-index:3; grid-column:1; grid-row:1; display:flex; align-items:center; justify-content:center; color:var(--faint); cursor:pointer; }
.pl-coin:hover{ color:var(--primary-deep); }
.pl-col{ position:sticky; top:0; font-size:10.5px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; cursor:s-resize; border-radius:0 0 5px 5px; }
.pl-g.lieu .pl-col{ font-size:12.5px; color:var(--soft); cursor:pointer; }
.pl-col:hover{ background:var(--primary-soft); color:var(--primary-deep); }
.pl-rg{ position:sticky; left:0; grid-column:1; display:flex; align-items:center; gap:6px; padding:0 8px; cursor:e-resize; border-radius:0 7px 7px 0; }
.pl-rg .pil{ min-width:34px; font-size:11px; padding:1px 6px; }
.pl-rg-n{ font-size:11px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }
.pl-rg:hover{ background:var(--primary-soft); }
.pl-pc{ position:sticky; right:0; display:flex; align-items:center; justify-content:flex-end; padding-right:2px; font-size:10.5px; font-weight:700; color:var(--soft); font-variant-numeric:tabular-nums; }
.pl-c{ position:relative; display:block; min-width:0; min-height:0; padding:0; background:#fff; border-radius:6px; box-shadow:inset 0 0 0 1px #D6E1DF; overflow:hidden; cursor:pointer; transition:opacity .12s; }
.pl-c.vide{ background:#EEF3F2; box-shadow:none; }
.pl-ph{ position:absolute; inset:7%; background-size:contain; background-position:center; background-repeat:no-repeat; font-size:9.5px; font-weight:600; line-height:1.05; color:var(--soft); overflow:hidden; overflow-wrap:anywhere; pointer-events:none; }
.pl-c.vide:hover .pl-ph{ background-image:var(--fantome) !important; opacity:.5; }
.pl-c:hover{ box-shadow:inset 0 0 0 2px var(--primary); z-index:1; }
.pl-c.off{ opacity:.26; }
.pl-c.du-choisi{ box-shadow:inset 0 0 0 2px var(--primary); background:var(--primary-soft); }
.pl-c.sel{ box-shadow:inset 0 0 0 2.5px var(--ink); z-index:1; }
.pl-c.vise{ box-shadow:inset 0 0 0 2.5px #2DD4BF; background:rgba(45,212,191,.22); z-index:1; }
/* Les casiers voisins d'un même article forment un bloc. */
.pl-c.j-b{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.pl-c.j-h{ border-top-left-radius:0; border-top-right-radius:0; }
.pl-c.j-d{ border-top-right-radius:0; border-bottom-right-radius:0; }
.pl-c.j-g{ border-top-left-radius:0; border-bottom-left-radius:0; }
.pl-ecran{ display:flex; align-items:center; justify-content:center; background:#2A3442; color:#AFC0D2; font-size:11px; font-weight:600; border-radius:6px; }
.pl-bulle{ position:absolute; left:0; top:0; z-index:5; pointer-events:none; display:flex; align-items:center; gap:11px; max-width:320px; padding:9px 13px 9px 9px; background:var(--ink); color:#fff; border-radius:12px; box-shadow:0 14px 32px -12px rgba(18,32,50,.6); font-size:12px; line-height:1.3; }
.pl-bulle img{ width:78px; height:78px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; flex:none; }
.pl-bulle b{ font-size:13.5px; font-weight:700; }
.pl-bulle span{ color:#B9C6D6; white-space:nowrap; }

/* ---------------- Présenter ---------------- */
body.presente .haut, body.presente #feuille, body.presente #droite, body.presente #plan-zone, body.presente #commandes, body.presente #reperes{ display:none !important; }
#ruban{ position:absolute; left:16px; right:16px; bottom:16px; z-index:6; display:flex; align-items:center; gap:18px; padding:11px 16px; background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(1.3); border:1px solid rgba(255,255,255,.7); border-radius:18px; box-shadow:0 20px 50px -20px rgba(18,32,50,.45); }
#ruban[hidden]{ display:none; }
.ruban-c b{ font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.ruban-ch{ display:flex; gap:20px; padding-left:18px; border-left:1px solid rgba(18,32,50,.13); }
.ruban-ch > div{ display:flex; flex-direction:column; line-height:1.1; }
.ruban-ch b{ font-size:20px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ruban-ch span{ font-size:11.5px; font-weight:600; color:var(--soft); white-space:nowrap; }
.ruban-el{ flex:1; min-width:0; display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.ruban-a{ display:flex; align-items:center; gap:4px; }
.ruban-a .btn{ margin-left:8px; }
.bulle-art{ display:flex; align-items:center; gap:11px; white-space:normal; max-width:280px; }
.bulle-art img{ width:62px; height:62px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; flex:none; }
.bulle-art b{ font-size:13.5px; }

/* Avec le nom de l'étape, son numéro remplace l'icône (même largeur) ; sans le nom, on garde le numéro et l'icône. */
.etape-b svg.ico{ display:none; }
/* La barre du haut se resserre d'elle-même, palier par palier, tant que tout n'y tient pas (ajusterHaut dans appli.js).
   Les noms et numéros cachés restent dans l'info-bulle de chaque bouton. */
.haut-1 #version .v-num{ display:none; }
.haut-2 .etape-b span{ display:none; }
.haut-2 .etape-b{ padding:8px; }
.haut-2 .etape-b svg.ico{ display:block; }
.haut-3 .etape-no{ display:none; }
.haut-3 .etape-b{ padding:8px 6px; }
.haut-4 .haut{ gap:8px; }
.haut-4 .client-bloc input{ width:112px; }
.haut-4 #presenter span{ display:none; }
.haut-5 #sauvegarde .s-texte{ display:none; }
.haut-5 #sauvegarde::before{ content:''; display:inline-block; width:9px; height:9px; border-radius:50%; background:currentColor; vertical-align:middle; }
.haut-6 .haut .brand{ display:none; }
.haut-6 .client-bloc input{ width:86px; }
.haut-6 #etapes{ justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
@media (max-width:1100px){ #plan-zone{ left:14px; height:46vh; } body[data-etape="chargement"] #feuille{ bottom:calc(46vh + 28px); } }

.ex-c{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
.ex-c label{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; cursor:pointer; }
.ex-c input{ accent-color:var(--primary); }

/* ---- Les listes déroulantes (revendeur/listes.js) : un bouton au style de l'app, la vraie liste cachée dessous ---- */
.lb-natif{ position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden; }
.lb{ display:inline-flex; align-items:center; gap:7px; min-width:0; min-height:32px; padding:5px 9px 5px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; font:inherit; font-size:13px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer; transition:border-color .12s, box-shadow .12s, background .12s; }
.lb:hover{ border-color:#B9CBC8; }
.lb:focus-visible, .lb.lb-ouverte{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.lb:disabled{ opacity:.5; cursor:default; }
.lb .lb-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb.lb-vide .lb-t{ color:var(--faint); font-weight:500; }
.lb-ch{ flex:none; width:15px; height:15px; color:var(--faint); transition:transform .15s; }
.lb.lb-ouverte .lb-ch{ transform:rotate(180deg); color:var(--primary-deep); }
.lb-p{ flex:none; width:10px; height:10px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
/* Le menu ouvert */
.lb-pop{ position:fixed; z-index:80; overflow:auto; padding:5px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 44px -12px rgba(18,32,50,.32), 0 2px 6px rgba(18,32,50,.06); animation:lb-entre .12s ease-out; }
@keyframes lb-entre{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.lb-o{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; white-space:nowrap; }
.lb-o span{ flex:1; }
.lb-o.vise{ background:var(--sunken); }
.lb-o.on{ font-weight:700; color:var(--primary-deep); background:var(--primary-soft); }
.lb-o.lb-o-vide span{ color:var(--faint); }
.lb-o.off{ opacity:.4; cursor:default; }
.lb-ok{ flex:none; width:16px; height:16px; color:var(--primary-deep); }
/* Dans le tableau des articles : discret, comme les autres cellules, visible au survol */
.tv-c .lb{ width:100%; min-height:30px; height:30px; border-color:transparent; background:none; font-weight:500; padding:0 6px; }
.tv-c .lb:hover{ border-color:var(--line); background:#fff; }
.tv-c.err .lb{ background:#FDECEC; color:var(--danger); }
.tv-c.att .lb{ background:var(--warn-soft); }
/* Le type de casier du Calcul : compact, avec la pastille de couleur */
.lb.tb-sel{ min-height:26px; padding:2px 6px 2px 8px; font-size:12px; font-weight:700; border-left-width:1px; }
.lb.tb-sel.vide{ background:var(--warn-soft); border-color:#EFCB94; }
/* Champs, import Excel, fenêtres */
.petit-champ .lb, .champ-ligne .lb{ min-height:34px; }
.champ-select.lb, .champ-ligne.reappro .lb{ width:100%; }
table.import .lb{ width:100%; font-weight:500; color:var(--soft); }
table.import tr.reconnue .lb{ border-color:var(--primary); color:var(--primary-deep); font-weight:600; background:var(--primary-soft); }
.tv-c .lb .lb-ch{ opacity:0; }
.tv-c .lb:hover .lb-ch, .tv-c .lb.lb-ouverte .lb-ch{ opacity:1; }

/* ---- Français / anglais, tout en haut (revendeur/langue.js) ---- */
.langue{ display:flex; flex:none; padding:2px; border-radius:8px; background:var(--sunken); }
.langue button{ padding:4px 7px; border-radius:6px; font-size:11px; font-weight:800; letter-spacing:.03em; color:var(--soft); }
.langue button:hover{ color:var(--ink); }
.langue button.on{ background:#fff; color:var(--primary-deep); box-shadow:0 1px 2px rgba(18,32,50,.12); }

/* La réappro : le bouton dans l'en-tête du calcul, et la fenêtre (mode, jours de la semaine). */
.reappro-btn{ cursor:pointer; text-align:left; }
.reappro-btn b{ font-weight:600; color:var(--ink); white-space:nowrap; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.reappro-btn:hover b{ border-color:var(--primary); }
.reappro-mode{ margin-bottom:14px; }
.reappro-jours{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.reappro-jours .puce{ padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:600; font-size:13px; color:var(--soft); }
.reappro-jours .puce.on{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* Les photos des articles : les aides du panneau, les photos à associer, la fenêtre photo, la ligne active (Ctrl+V). */
.aides{ display:flex; flex-direction:column; gap:6px; }
.aide-l{ display:grid; grid-template-columns:18px 1fr auto; gap:8px; align-items:center; text-align:left; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:12.5px; color:var(--ink); }
.aide-l svg.ico{ width:16px; height:16px; color:var(--primary); }
.aide-l b{ color:var(--primary); font-weight:700; font-size:12px; }
.aide-l.att svg.ico, .aide-l.att b{ color:#C2780B; }
.aide-l.attente{ color:var(--soft); grid-template-columns:18px 1fr; }
button.aide-l:hover{ border-color:var(--primary); }
.orphelines-l{ display:flex; flex-direction:column; gap:8px; }
.orph-l{ display:grid; grid-template-columns:54px 1fr; gap:10px; align-items:center; }
.orph-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.orph-t small{ color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orph-t .lien{ text-align:left; font-size:12.5px; }
.vignette.a-revoir{ outline:2px solid #E9A23B; outline-offset:-2px; position:relative; }
.vignette.a-revoir::after{ content:'!'; position:absolute; right:-3px; top:-3px; width:15px; height:15px; border-radius:50%; background:#E9A23B; color:#fff; font:800 10px/15px Geist, sans-serif; text-align:center; }
.tv-ligne.active{ background:rgba(14,165,160,.06); box-shadow:inset 3px 0 0 var(--primary); }
.photo-fen{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; }
.photo-grande{ background:var(--sunken); border-radius:12px; display:flex; align-items:center; justify-content:center; height:min(420px, 60vh); overflow:hidden; padding:14px; }
.photo-grande img{ width:100%; height:100%; object-fit:contain; }
.photo-grande.vide{ flex-direction:column; gap:8px; color:var(--soft); }
.photo-grande.vide svg.ico{ width:34px; height:34px; }
.photo-cote{ display:flex; flex-direction:column; gap:10px; }
.photo-casier{ display:flex; justify-content:center; padding:14px; background:#3B4452; border-radius:10px; }
.photo-casier canvas{ border-radius:3px; box-shadow:0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.35); }
.photo-actions{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.photo-actions .btn{ justify-content:center; }
.photo-actions .btn.retirer{ color:var(--danger); }
.photo-actions .btn.retirer:hover{ background:#FDECEC; }
.equipe-l{ display:flex; flex-direction:column; gap:6px; max-height:55vh; overflow:auto; }
.equipe-ph{ display:grid; grid-template-columns:20px 46px 1fr; gap:10px; align-items:center; padding:6px 8px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.equipe-ph .mini{ width:46px; height:46px; }
.equipe-ph .mini img{ width:100%; height:100%; object-fit:contain; }
.equipe-t{ display:flex; flex-direction:column; min-width:0; }
.equipe-t i{ font-style:normal; color:var(--soft); font-weight:600; }
.equipe-t small{ color:var(--soft); }
@media (max-width:900px){ .photo-fen{ grid-template-columns:1fr; } }

/* La banque d'images RS dans la fenêtre photo : une grille de vignettes à cliquer. */
.banque-rs{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.banque-rs .bloc-titre{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.banque-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; max-height:300px; overflow:auto; padding:2px; }
.banque-ph{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px; border:1px solid var(--line); border-radius:10px; background:#fff; text-align:center; min-width:0; }
.banque-ph img{ width:100%; height:84px; object-fit:contain; }
.banque-ph span{ font-size:11.5px; font-weight:700; color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.banque-ph small{ font-size:10.5px; color:var(--soft); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.banque-ph:hover{ border-color:var(--primary); box-shadow:0 2px 8px rgba(14,165,160,.15); }
.banque-ph:disabled{ opacity:.5; }

/* Les filtres de la banque RS : rayons en puces, recherche, type d'article et marque, un titre par type. */
.rs-rayons{ display:flex; flex-wrap:wrap; gap:6px; }
.rs-filtres{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:8px; }
.rs-filtres .chercher{ width:100%; }
.rs-filtres select{ min-width:0; }
.rs-compte{ margin-top:-2px; }
.rs-type{ grid-column:1 / -1; font-size:12px; font-weight:700; color:var(--soft); text-transform:uppercase; letter-spacing:.04em; padding:8px 2px 0; }
.rs-plus{ grid-column:1 / -1; justify-self:center; }
.banque-grille{ max-height:360px; }
@media (max-width:900px){ .rs-filtres{ grid-template-columns:1fr; } }

/* Les statistiques pour le revendeur : budget, tournée de réappro, quotas face à la conso. */
.c-budget, .c-tournee{ grid-column:span 6; display:flex; flex-direction:column; gap:10px; }
.c-quotas{ grid-column:span 12; display:flex; flex-direction:column; gap:10px; }
.stats-g .c-budget h2, .stats-g .c-tournee h2, .stats-g .c-quotas h2{ margin-bottom:0; }
.chiffres-l{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.chiffres-l > div{ background:var(--sunken); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.chiffres-l b{ font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.chiffres-l span{ font-size:11.5px; color:var(--soft); line-height:1.25; }
.st-groupe{ margin-top:2px; }
.budget-l{ display:flex; flex-direction:column; gap:7px; }
.budget-r{ display:grid; grid-template-columns:minmax(0, 150px) minmax(0, 1fr) 76px 150px; gap:9px; align-items:center; font-size:12.5px; }
.budget-r.court{ grid-template-columns:minmax(0, 220px) minmax(0, 1fr) 46px; }
.budget-n{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.budget-r b{ text-align:right; font-variant-numeric:tabular-nums; font-size:12px; }
.budget-r small{ color:var(--soft); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-tournee .btn{ align-self:flex-start; }
.q-grille{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.q-bloc{ border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.q-bloc h3{ font-size:13px; font-weight:700; }
.q-bloc .petit{ margin:0 0 4px; }
.q-bloc.err{ border-color:#F2B8B5; background:#FFF7F6; }
.q-bloc.att{ border-color:#F3D19C; background:var(--warn-soft); }
.q-l{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; }
.q-l span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.q-l b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.q-ok{ font-size:12.5px; color:var(--primary-deep); font-weight:600; }
@media (max-width:1300px){ .c-budget, .c-tournee{ grid-column:span 12; } .q-grille{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* La reprise des infos RS : le modèle, la taille, les champs à cocher (l'article à gauche, RS à droite). */
.rs-infos{ display:flex; flex-direction:column; gap:12px; }
.rs-modele{ display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; }
.rs-modele img{ width:72px; height:72px; object-fit:contain; border:1px solid var(--line); border-radius:10px; background:#fff; }
.rs-modele div{ display:flex; flex-direction:column; gap:3px; }
.rs-modele small{ color:var(--soft); }
.rs-champs td{ white-space:normal; vertical-align:top; padding-top:8px; padding-bottom:8px; }
.rs-champs td.tb-n{ max-width:none; }
.rs-champs tr.pareil td{ color:var(--soft); }
.rs-autres{ display:flex; gap:8px; align-items:flex-start; font-size:13px; }

/* L'administration (en local) : le bouton à côté des clients, le bandeau « Voir comme », l'écran à onglets, la grille des rôles. */
.admin-b{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; color:var(--soft); flex:none; }
.admin-b:hover{ background:#fff; color:var(--ink); }
.admin-b svg.ico{ width:18px; height:18px; }
.voir-comme{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:60; display:flex; align-items:center; gap:12px; padding:10px 12px 10px 16px; background:#122032; color:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.3); font-size:13px; font-weight:600; max-width:calc(100vw - 32px); }
.voir-comme svg.ico{ width:18px; height:18px; color:#2DD4BF; flex:none; }
.voir-comme .btn{ background:#fff; color:#122032; }
/* Les messages passent au-dessus du bandeau « Voir comme » au lieu d'être cachés derrière. */
body.avec-voir-comme #messages{ bottom:96px; }
/* « Voir comme » avec édition : on écrit dans le compte de quelqu'un, le bandeau le dit en orange. */
.voir-comme.edition{ background:#9A3412; }
.voir-comme.edition svg.ico{ color:#FED7AA; }
.admin-corps{ display:flex; flex-direction:column; gap:12px; min-height:420px; }
.admin-onglets b{ font-weight:700; color:var(--soft); margin-left:4px; }
.admin-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.admin-table{ overflow:auto; max-height:60vh; border:1px solid var(--line); border-radius:12px; }
.admin-table .tb td{ white-space:nowrap; }
.admin-table .tb-in.large{ width:100%; min-width:140px; }
.admin-btns{ display:flex; gap:6px; align-items:center; }
.roles-t th{ vertical-align:bottom; }
.roles-t th .tb-in{ width:120px; font-weight:700; }
.roles-t th small{ display:block; font-weight:500; color:var(--soft); margin-top:3px; }
.roles-t td.c{ text-align:center; }
.roles-t tr.roles-sep td{ background:var(--sunken); font-size:11.5px; font-weight:700; color:var(--soft); text-transform:uppercase; letter-spacing:.04em; }
.droits-g{ display:grid; grid-template-columns:1fr 1.4fr; gap:18px; }
.droits-g h3{ font-size:13px; font-weight:700; margin-bottom:6px; }
.droit-l{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:8px; font-size:13px; }
.droit-l.ecart{ background:var(--warn-soft); }
.droit-l small{ margin-left:auto; color:var(--warn); font-size:11px; font-weight:600; }
.admin-donnees{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.admin-donnees .carte{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.admin-donnees h3{ font-size:14px; font-weight:700; }
@media (max-width:900px){ .droits-g, .admin-donnees{ grid-template-columns:1fr; } }
.boite.admin-boite{ width:min(1240px, 96vw); max-width:none; }
.admin-table .tb-in{ text-align:left; }
.admin-table .tb-in.large{ min-width:120px; }
.admin-table td.tb-n{ max-width:240px; overflow:hidden; text-overflow:ellipsis; }

/* ================= Écran étroit : le contenu suit la largeur de son panneau ================= */
/* Le contenu des grands panneaux (Envoyer, Statistiques…) se règle sur la largeur du panneau lui-même, pas sur celle de
   l'écran : le panneau rétrécit déjà pour laisser la colonne de droite (--reserve-droite). */
#page{ container:page / inline-size; }
@container page (max-width:700px){
  .envoi{ grid-template-columns:minmax(0, 1fr); padding:4px 16px 18px; }
  .stats-g > *{ grid-column:span 12 !important; }
  .c-tuiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@container page (min-width:701px) and (max-width:860px){
  .c-rempl, .c-types{ grid-column:span 12; }
  .c-coupe, .c-auto, .c-fam{ grid-column:span 6; }
  .c-tuiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
/* Sous 960 px, la colonne de gauche (familles, profils…) passe au-dessus du tableau au lieu d'être à côté. */
@media (max-width:960px){
  body[data-etape="articles"] #feuille, body[data-etape="salaries"] #feuille, body[data-etape="quotas"] #feuille, body[data-etape="envoi"] #feuille{ grid-template-columns:minmax(0, 1fr); grid-template-rows:minmax(0, 40%) minmax(0, 1fr); }
  body[data-etape="articles"] #panneau, body[data-etape="salaries"] #panneau, body[data-etape="quotas"] #panneau, body[data-etape="envoi"] #panneau{ border-right:0; border-bottom:1px solid var(--line); }
}

/* ---- Stickers pour l'imprimeur (revendeur/stickers.js) : la qualité d'impression de chaque zone, l'export ---- */
.q-imp{ align-self:flex-start; display:inline-flex; align-items:center; gap:5px; margin-top:3px; padding:1px 7px; border-radius:6px; font-size:10.5px; font-weight:700; white-space:nowrap; }
.q-imp::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.q-bon, .reg-q.q-bon{ color:var(--primary-deep); background:var(--primary-soft); }
.q-vect, .reg-q.q-vect{ color:#1d4ed8; background:#e8efff; }
.q-moyen, .reg-q.q-moyen{ color:var(--warn); background:var(--warn-soft); }
.q-faible, .q-manque, .reg-q.q-faible, .reg-q.q-manque{ color:var(--danger); background:#FDECEC; }
.reg-q{ font-size:12.5px; font-weight:600; line-height:1.4; padding:8px 10px; border-radius:9px; margin:0; }
.stick-export{ margin-top:12px; }
.stick-aide.stick-bloque{ color:var(--danger); font-weight:600; }
.liste-bloque{ margin:8px 0 4px 18px; display:grid; gap:6px; font-size:12.5px; line-height:1.4; }
.liste-bloque b{ display:inline-block; min-width:28px; }

/* ---- Le bouton Guide, à côté de Présenter : ouvre guide.html à l'étape en cours ---- */
#guide{ flex:none; padding:8px 11px; text-decoration:none; color:var(--ink); }
.haut-4 #guide span{ display:none; }

/* ---------- Brouillon ou validée (= commande passée chez LOGIMATIQ) : la même pastille partout ---------- */
.statut-p{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px; border-radius:20px; font-size:11.5px; font-weight:700; line-height:1.2; white-space:nowrap; border:1px solid; vertical-align:middle; }
.statut-p svg.ico{ width:13px; height:13px; stroke-width:2.3; }
.statut-p.brouillon{ background:var(--warn-soft); border-color:#F5D9A8; color:var(--warn); }
.statut-p.brouillon i{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.statut-p.validee{ background:#E3F5EC; border-color:#BFE5D0; color:#167A4B; }
#version{ display:inline-flex; align-items:center; gap:6px; }
.haut-5 #version .statut-p > span{ display:none; }
.haut-5 #version .statut-p{ padding:3px 5px; }
.carte-statut h2 .statut-p{ margin-left:auto; }
.carte-statut.validee{ border-color:#BFE5D0; }
.carte-statut .btn.large{ width:100%; margin-top:10px; }
.boutons-statut{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.boutons-statut .btn{ flex:1; }
.bandeau-fige.valide{ background:#E3F5EC; color:#167A4B; }
.bandeau-fige .btn + .btn{ margin-top:0; }

/* ---------- Clients de l'équipe : filtres, équipes, actions ---------- */
.clients-filtre{ display:flex; margin:-2px 0 12px; }
.clients-filtre button{ flex:1; }
.clients-filtre b{ font-weight:700; color:var(--faint); margin-left:3px; }
.clients-filtre button.on b{ color:var(--primary-deep); }
.equipe + .equipe{ margin-top:18px; }
.equipe-t{ display:flex; align-items:center; gap:10px; padding:6px 4px 8px; margin-bottom:8px; border-bottom:2px solid var(--ink); font-size:13.5px; font-weight:800; color:var(--ink); }
.equipe-t em{ font-style:normal; font-size:12px; font-weight:600; color:var(--faint); }
.equipe-t .lien{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:12.5px; }
.client-gt{ min-height:30px; }
.client-gt-a{ margin-left:auto; display:inline-flex; align-items:center; gap:2px; text-transform:none; letter-spacing:0; }
.client-gt-a .lien{ display:inline-flex; align-items:center; gap:4px; margin-right:4px; }
.client-gt .icone{ width:28px; height:28px; }
.client-st{ display:flex; align-items:center; gap:8px; margin-top:3px; }
.client-st em{ font-style:normal; font-size:12px; color:var(--soft); }
.client-l.validee{ border-color:#BFE5D0; background:#F6FBF8; }
.client-l.validee.on{ border-color:var(--primary); background:var(--primary-soft); }
.icone.valider-b:hover{ background:#E3F5EC; color:#167A4B; }
.champ-boite{ width:100%; margin-top:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:15px; font-weight:600; }
.champ-boite:focus{ outline:none; border-color:var(--primary); }

/* ---------- Administration : le statut d'une configuration en couleur ---------- */
.statut-sel.validee{ background:#E3F5EC; border-color:#BFE5D0; color:#167A4B; font-weight:700; }
.statut-sel.brouillon{ background:var(--warn-soft); border-color:#F5D9A8; color:var(--warn); font-weight:700; }

/* ---------- Les MO de fabrication (administrateur) ---------- */
.mo-corps{ display:flex; flex-direction:column; gap:14px; }
.mo-tete{ display:flex; flex-direction:column; gap:6px; }
.mo-tete > div:first-child{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; }
.mo-tete .note{ margin-top:0; }
.mo-panneau{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:#fff; }
.mo-h{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.mo-h h3{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; }
.mo-h .btn{ margin-left:auto; }
.mo-reste{ margin-left:auto; font-size:12px; font-weight:700; color:var(--warn); background:var(--warn-soft); padding:3px 9px; border-radius:20px; }
.mo-reste.plein{ color:#167A4B; background:#E3F5EC; }
.mo-groupes{ display:flex; flex-direction:column; gap:10px; margin-top:10px; max-height:38vh; overflow:auto; padding-right:4px; }
.mo-groupe{ border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:var(--paper); }
.mo-ref{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.mo-ref b{ font-size:13.5px; }
.mo-ref span{ font-size:12px; color:var(--soft); }
.mo-ref .lien{ margin-left:auto; padding:0; }
.mo-ou{ display:flex; align-items:flex-start; gap:10px; margin-top:4px; }
.mo-lieu{ flex:none; width:150px; font-size:12px; font-weight:600; color:var(--soft); padding-top:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mo-cols{ display:flex; flex-wrap:wrap; gap:6px; }
.mo-col{ display:flex; flex-direction:column; align-items:center; min-width:62px; padding:5px 8px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.mo-col .n{ font-size:11px; font-weight:700; color:var(--faint); }
.mo-col .v{ font-size:12.5px; font-weight:700; color:var(--primary-deep); }
.mo-col.vide .v{ color:var(--warn); font-weight:600; }
.mo-col.on{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 2px rgba(14,165,160,.25); }
.mo-attribuer{ display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.mo-attribuer input{ flex:1; min-width:0; padding:9px 11px; border:1px solid var(--line); border-radius:10px; font-size:14px; font-weight:600; }
.mo-attribuer input:focus{ outline:none; border-color:var(--primary); }
.mo-fiches{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.mo-fiche{ display:grid; grid-template-columns:70px minmax(0, 1fr) minmax(0, 1.3fr) auto auto; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; }
.mo-ref2{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mo-num{ font-size:15px; font-weight:800; color:var(--primary-deep); }
.mo-ref2{ font-size:12.5px; font-weight:600; }
.mo-ou2{ font-size:12px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mo-date{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--soft); white-space:nowrap; }
.mo-date input{ padding:5px 7px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; }
.mo-qui{ text-align:right; }
.mo-boutons{ display:flex; gap:6px; }