/* SLS TWO — Atelier Ossature, habillage SLS rouge/noir.
   Point 389 — couche exclusivement visuelle.
   Aucune règle métier, aucun calcul et aucun état n'est recomposé ici. */

body.mode-atelier {
  --oss-sls-red: #c00000;
  --oss-sls-red-dark: #8f0000;
  --oss-sls-red-soft: #fbeaea;
  --oss-sls-red-wash: #fff7f7;
  --oss-sls-ink: #111111;
  --oss-sls-ink-2: #343434;
  --oss-sls-muted: #6d6d6d;
  --oss-sls-line: #d7d7d7;
  --oss-sls-line-strong: #b9b9b9;
  --oss-sls-panel: #ffffff;
  --oss-sls-canvas: #fafafa;
  --oss-sls-shell: #f1f1f1;
  --oss-sls-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

/* La coquille devient un poste de travail clair : noir pour la structure,
   rouge seulement pour le geste actif, la sélection et les actions SLS. */
body.mode-atelier {
  background: var(--oss-sls-shell);
  color: var(--oss-sls-ink);
}

body.mode-atelier #fil-ariane {
  color: var(--oss-sls-ink-2);
}

body.mode-atelier #topbar-actions button.principal,
body.mode-atelier #topbar-actions .principal {
  border-color: var(--oss-sls-red);
  background: var(--oss-sls-red);
  color: #fff;
}

body.mode-atelier .ossature {
  color: var(--oss-sls-ink);
}

/* Bandeau de phase : proche d'un ruban desktop, sans aplat coloré. */
body.mode-atelier .ossature > header,
body.mode-atelier .ossature .oss-entete,
body.mode-atelier .ossature .oss-bandeau {
  border: 0;
  border-bottom: 1px solid var(--oss-sls-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.mode-atelier .ossature button,
body.mode-atelier .ossature select,
body.mode-atelier .ossature input {
  border-color: var(--oss-sls-line);
}

body.mode-atelier .ossature button:hover:not(:disabled) {
  border-color: var(--oss-sls-line-strong);
  background: #f7f7f7;
}

body.mode-atelier .ossature button[aria-pressed="true"],
body.mode-atelier .ossature button.actif,
body.mode-atelier .ossature .actif > button,
body.mode-atelier .ossature .principal {
  border-color: var(--oss-sls-red);
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .ossature .principal {
  background: var(--oss-sls-red);
  color: #fff;
}

body.mode-atelier .ossature button:focus-visible,
body.mode-atelier .ossature input:focus-visible,
body.mode-atelier .ossature select:focus-visible {
  outline: 2px solid rgba(192, 0, 0, 0.28);
  outline-offset: 1px;
}

/* Ruban permanent : familles d'objets puis actions, lisible comme une barre d'outil CAO. */

body.mode-atelier .oss-commandes .cmd-groupe + .cmd-groupe::before {
  content: "";
}

body.mode-atelier .oss-commandes button {
  color: var(--oss-sls-ink);
}

body.mode-atelier .oss-commandes button[aria-pressed="true"],
body.mode-atelier .oss-commandes button.actif {
  color: var(--oss-sls-red);
}

body.mode-atelier .oss-commandes kbd {
  border: 1px solid #d8d8d8;
  background: #f5f5f5;
  color: #555;
}

/* Trois zones canoniques : inventaire / plan / inspecteur. */

body.mode-atelier .at-plan-hote {
  background:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px),
    #fff;
  background-size: 32px 32px;
}

/* Cartes : relief réduit, hiérarchie portée par titre/filet plutôt que par couleur. */
body.mode-atelier .atelier .carte,
body.mode-atelier .at-gauche > section,
body.mode-atelier .at-droite > section,
body.mode-atelier .at-fiche {
  border: 1px solid var(--oss-sls-line);
  border-radius: 8px;
  background: var(--oss-sls-panel);
  box-shadow: none;
}

body.mode-atelier .atelier h2,
body.mode-atelier .atelier h3,
body.mode-atelier .atelier h4 {
  color: var(--oss-sls-ink);
}

body.mode-atelier .atelier .sur-titre,
body.mode-atelier .atelier .note,
body.mode-atelier .atelier small {
  color: var(--oss-sls-muted);
}

/* Arbres/listes : sélection SLS rouge pâle, texte noir. */
body.mode-atelier .atelier .sel,
body.mode-atelier .atelier [aria-selected="true"],
body.mode-atelier .atelier .ligne-arbre.sel,
body.mode-atelier .atelier .niveau-actif {
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-ink);
  box-shadow: inset 3px 0 0 var(--oss-sls-red);
}

body.mode-atelier .atelier .sel b,
body.mode-atelier .atelier [aria-selected="true"] b {
  color: var(--oss-sls-red-dark);
}

/* Plan : une sélection est rouge SLS ; les états métier conservent leurs couleurs
   sémantiques propres (conforme/alerte/erreur) lorsqu'elles portent une information. */
body.mode-atelier .atelier svg .selection,
body.mode-atelier .atelier svg [data-selection="true"],
body.mode-atelier .atelier svg .choisi {
  stroke: var(--oss-sls-red) !important;
}

body.mode-atelier .atelier svg .selection-remplissage,
body.mode-atelier .atelier svg [data-selection-fill="true"] {
  fill: rgba(192, 0, 0, 0.09) !important;
}

/* Inspecteur : l'objet sélectionné devient le vrai titre du panneau de droite. */
body.mode-atelier .at-droite > :first-child {
  margin-top: 0;
}

body.mode-atelier .at-droite input,
body.mode-atelier .at-droite select {
  min-height: 30px;
  border-radius: 6px;
  background: #fff;
}

body.mode-atelier .at-droite input:focus,
body.mode-atelier .at-droite select:focus {
  border-color: var(--oss-sls-red);
}

/* Menus/panneaux flottants : mêmes codes que la maquette de référence. */
body.mode-atelier .oss-menu,
body.mode-atelier .menu-contextuel,
body.mode-atelier dialog {
  border: 1px solid var(--oss-sls-line);
  border-radius: 9px;
  background: #fff;
  color: var(--oss-sls-ink);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

body.mode-atelier .oss-menu button:hover,
body.mode-atelier .menu-contextuel button:hover {
  background: var(--oss-sls-red-wash);
}

body.mode-atelier .danger,
body.mode-atelier button.danger {
  color: var(--oss-sls-red);
}

/* Console basse : noire/grise, point rouge uniquement pour le contexte actif. */
body.mode-atelier #at-bas {
  min-height: 28px;
  border-top: 1px solid var(--oss-sls-line);
  background: #fff;
  color: var(--oss-sls-ink-2);
}
body.mode-atelier .oss-console {
  color: var(--oss-sls-ink-2);
}

body.mode-atelier .oss-console::before {
  content: "";
}

/* Les boutons de changement de vue 2D/3D suivent la charte sans transformer les
   résultats techniques en rouge. */
body.mode-atelier .oss-vues button[aria-pressed="true"],
body.mode-atelier [data-vue][aria-pressed="true"] {
  border-color: var(--oss-sls-red);
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red);
}

/* ═════════════════════════════════════════════════════════════════════════════
   TRANCHE 2 — COQUILLE CAO : modèle local / plan / inspecteur
   Le shell existant reste le producteur du DOM. Cette couche ne fait que lui donner
   la hiérarchie validée dans la maquette : le modèle local remplace la navigation
   générale tant que l'utilisateur ne demande pas explicitement cette dernière.
   ═════════════════════════════════════════════════════════════════════════════ */

/* En Atelier, le fil d'Ariane reste la porte de sortie mais cesse de consommer
   la hauteur d'un second bandeau applicatif. */

body.mode-atelier #fil-ariane {
  font-size: 11px;
  color: #4b4b4b;
}

/* Bandeau supérieur : identité à gauche, phases au centre, commandes globales à droite. */
body.mode-atelier .oss-bandeau-decisions {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) auto minmax(430px, 1.45fr);
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--oss-sls-line);
  background: #fff;
}

body.mode-atelier .oss-identite {
  min-width: 0;
  gap: 2px;
}

body.mode-atelier .oss-identite .sur-titre {
  color: var(--oss-sls-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
}

body.mode-atelier .oss-identite > span:not(.sur-titre) {
  gap: 7px;
}

body.mode-atelier .oss-identite strong {
  font-size: 13px;
  color: var(--oss-sls-ink);
}

body.mode-atelier .oss-niveau-courant {
  padding: 2px 7px;
  border: 1px solid rgba(192, 0, 0, .28);
  border-radius: 4px;
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
  font-size: 10px;
}

body.mode-atelier .oss-identite small {
  color: var(--oss-sls-muted);
  font-size: 11px;
}

body.mode-atelier .oss-navigation-basculer {
  width: 28px;
  min-width: 28px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--oss-sls-line);
  border-radius: 5px;
  background: #fff;
  color: var(--oss-sls-ink);
}

/* Phases : un vrai sélecteur compact. Le rouge signifie seulement "phase active". */
body.mode-atelier .oss-phases {
  align-self: center;
  overflow: hidden;
  border: 1px solid var(--oss-sls-line-strong);
  border-radius: 7px;
  background: #f3f3f3;
}

body.mode-atelier .oss-phases button {
  min-width: 88px;
  min-height: 32px;
  gap: 5px;
  padding: 4px 10px;
  border: 0;
  border-right: 1px solid var(--oss-sls-line);
  border-radius: 0;
  background: transparent;
  color: #343434;
  font-size: 11px;
}

body.mode-atelier .oss-phases button:last-child {
  border-right: 0;
}

body.mode-atelier .oss-phases button span {
  display: none;
}

body.mode-atelier .oss-phases button.actif {
  background: var(--oss-sls-red);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--oss-sls-red-dark);
}

body.mode-atelier .oss-phases button.actif:hover {
  background: var(--oss-sls-red-dark);
  color: #fff;
}

/* Les actions globales ressemblent à une barre de commandes et non à une série de cartes. */

body.mode-atelier .oss-globales > button,
body.mode-atelier .oss-globales > a,
body.mode-atelier .oss-globales > details > summary,
body.mode-atelier .oss-donnees-contexte > button {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--oss-sls-line);
  border-radius: 6px;
  background: #fff;
  color: var(--oss-sls-ink);
  font-size: 10px;
  white-space: nowrap;
}

body.mode-atelier .oss-globales .oss-calculer {
  min-height: 34px;
  padding: 6px 13px;
  border-color: var(--oss-sls-red);
  background: var(--oss-sls-red);
  color: #fff;
  font-weight: 750;
}

body.mode-atelier .oss-globales .oss-calculer:hover {
  border-color: var(--oss-sls-red-dark);
  background: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-option-degression {
  min-height: 30px;
  padding: 3px 7px;
  border: 1px solid var(--oss-sls-line);
  border-radius: 6px;
  background: #fff;
}

body.mode-atelier .oss-option-degression span small {
  color: var(--oss-sls-muted);
}

/* Le corps de Saisie est la maquette validée : arbre / plan / propriétés. */

/* Arbre modèle gauche. */

body.mode-atelier .oss-panneau-titre {
  position: sticky;
  top: 0;
  z-index: 7;
  min-height: 48px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--oss-sls-line);
  background: rgba(255,255,255,.98);
}

body.mode-atelier .oss-panneau-titre b {
  color: var(--oss-sls-ink);
  font-size: 13px;
}

body.mode-atelier .oss-panneau-titre small {
  color: var(--oss-sls-muted);
  font-size: 11px;
}

body.mode-atelier .oss-palette-fermer {
  border: 0 !important;
  background: transparent !important;
  color: #666 !important;
}

body.mode-atelier .oss-arbre {
  padding: 7px;
  background: #fff;
}

body.mode-atelier .oss-niveau {
  min-height: 38px;
  margin: 1px 0;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--oss-sls-ink);
}

body.mode-atelier .oss-niveau:hover {
  border-color: #e1e1e1;
  background: #f7f7f7;
}

body.mode-atelier .oss-niveau.actif {
  border-color: rgba(192,0,0,.16);
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-ink);
  box-shadow: inset 3px 0 0 var(--oss-sls-red);
}

body.mode-atelier .oss-niveau.actif .oss-niveau-icone,
body.mode-atelier .oss-niveau.actif b {
  color: var(--oss-sls-red);
}

body.mode-atelier .oss-niveau small {
  color: #777;
  font-size: 11px;
}

body.mode-atelier .oss-repli {
  margin: 6px 7px;
  border: 1px solid var(--oss-sls-line);
  border-radius: 6px;
  background: #fff;
}

body.mode-atelier .oss-repli > summary {
  padding: 7px 8px;
  color: var(--oss-sls-ink);
  font-size: 10px;
  font-weight: 700;
}

body.mode-atelier .oss-repli[open] > summary {
  border-bottom: 1px solid var(--oss-sls-line);
  background: #f8f8f8;
}

/* Plan : surface blanche dominante, titre plat, outils groupés à droite. */

body.mode-atelier .oss-vue-titre {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 42px;
  padding: 5px 9px;
  border-bottom: 1px solid var(--oss-sls-line);
  background: #fff;
  color: var(--oss-sls-ink);
  box-shadow: none;
}

body.mode-atelier .oss-vue-identite > span,
body.mode-atelier .oss-vue-titre > span {
  font-size: 11px;
  font-weight: 750;
}

body.mode-atelier .oss-vue-identite small,
body.mode-atelier .oss-vue-titre small {
  color: var(--oss-sls-muted);
  font-size: 11px;
}

body.mode-atelier .oss-vue-actions {
  gap: 4px;
}

body.mode-atelier .oss-vue-actions button,
body.mode-atelier .oss-vue-actions select {
  min-height: 28px;
  border: 1px solid var(--oss-sls-line);
  border-radius: 5px;
  background: #fff;
  color: var(--oss-sls-ink);
  font-size: 11px;
}

body.mode-atelier .oss-plan-dessin {
  background:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px),
    #fff;
  background-size: 32px 32px;
}

/* Inspecteur droit : sections techniques nettes, sans cartes épaisses. */
body.mode-atelier .oss-inspecteur .oss-section,
body.mode-atelier .oss-inspecteur details,
body.mode-atelier .oss-inspecteur .carte {
  margin: 6px 7px;
  border: 1px solid var(--oss-sls-line);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

body.mode-atelier .oss-inspecteur .oss-section h3,
body.mode-atelier .oss-inspecteur details > summary {
  margin: 0;
  padding: 7px 8px;
  border-bottom: 1px solid #ececec;
  background: #f7f7f7;
  color: var(--oss-sls-ink);
  font-size: 10.5px;
  font-weight: 750;
}

body.mode-atelier .oss-inspecteur label {
  color: #333;
}

body.mode-atelier .oss-inspecteur input,
body.mode-atelier .oss-inspecteur select {
  border: 1px solid var(--oss-sls-line);
  background: #fff;
  color: var(--oss-sls-ink);
}

body.mode-atelier .oss-inspecteur input:focus,
body.mode-atelier .oss-inspecteur select:focus {
  border-color: var(--oss-sls-red);
  box-shadow: 0 0 0 2px rgba(192,0,0,.08);
}

/* Barre basse : discrète et stable comme une barre d'état de logiciel métier. */
body.mode-atelier .oss-console {
  color: #4a4a4a;
}

body.mode-atelier .oss-console:empty::after {
  content: "Atelier Ossature";
  color: #777;
}

/* Le rouge SLS n'écrase jamais les couleurs d'état métier : succès, alerte et erreur
   restent distincts quand ils portent une conclusion technique. */
body.mode-atelier .ok,
body.mode-atelier .conforme,
body.mode-atelier [data-etat="ok"] {
  --oss-etat-preserve: 1;
}

@media (max-width: 1280px) {
  body.mode-atelier .oss-bandeau-decisions {
    grid-template-columns: minmax(210px,.75fr) auto minmax(350px,1.25fr);
    gap: 7px;
  }
  body.mode-atelier .oss-globales .oss-sortir-modele,
  body.mode-atelier .oss-option-degression small {
    display: none;
  }
  
}

@media (max-width: 1040px) {
  body.mode-atelier .oss-bandeau-decisions {
    grid-template-columns: 1fr auto;
  }
  
  
  
  
}

@media (max-width: 760px) {
  body.mode-atelier .oss-bandeau-decisions {
    grid-template-columns: 1fr;
  }
  body.mode-atelier .oss-phases {
    justify-self: start;
  }
  
  
}

/* ═════════════════════════════════════════════════════════════════════════════
   TRANCHE 3 — DALLE / CHARGES / RÉSULTATS : préparation visuelle du point 388
   Ces sélecteurs ciblent les classes déjà livrées par le point 388 sans en reprendre
   la logique. Le panneau droit reste descriptif ; les gestes restent dans le ruban.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-dalle-section-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 5px;
  padding: 6px 0 4px;
  border: 0;
  border-bottom: 1px solid var(--oss-sls-line);
  background: transparent;
}

body.mode-atelier .oss-dalle-section-titre b {
  color: var(--oss-sls-ink);
  font-size: 10.5px;
}

body.mode-atelier .oss-dalle-section-titre span {
  color: var(--oss-sls-muted);
  font-size: 10.5px;
}

body.mode-atelier .oss-dalle-portee-resume {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px;
  border: 1px solid #e4e4e4;
  border-radius: 7px;
  background: #fafafa;
}

body.mode-atelier .oss-dalle-portee-vignette {
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(192,0,0,.24);
  border-radius: 6px;
  background: var(--oss-sls-red-wash);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-dalle-portee-vignette .nv-appui-dessin {
  min-width: 48px;
  min-height: 38px;
  border-color: var(--oss-sls-red) !important;
  color: var(--oss-sls-red);
}

body.mode-atelier .oss-dalle-portee-vignette small {
  color: var(--oss-sls-red-dark);
  font-size: 10.5px;
  font-weight: 700;
}

body.mode-atelier .oss-dalle-portee-meta {
  display: grid;
  gap: 4px;
}

body.mode-atelier .oss-dalle-portee-meta > span {
  display: grid;
  grid-template-columns: 66px minmax(0,1fr);
  gap: 7px;
  align-items: baseline;
  padding-bottom: 3px;
  border-bottom: 1px dotted #dedede;
}

body.mode-atelier .oss-dalle-portee-meta > span:last-child {
  border-bottom: 0;
}

body.mode-atelier .oss-dalle-portee-meta small {
  color: var(--oss-sls-muted);
  font-size: 10.5px;
}

body.mode-atelier .oss-dalle-portee-meta b {
  overflow: hidden;
  color: var(--oss-sls-ink);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-dalle-charges-resume {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 5px;
}

body.mode-atelier .oss-dalle-charges-resume > div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fff;
}

body.mode-atelier .oss-dalle-charges-resume dt {
  color: var(--oss-sls-muted);
  font-size: 10.5px;
}

body.mode-atelier .oss-dalle-charges-resume dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: var(--oss-sls-ink);
  font-size: 10px;
  font-weight: 750;
}

body.mode-atelier .oss-dalle-menu-note {
  margin: 6px 0 0;
  padding: 6px 8px;
  border-left: 2px solid var(--oss-sls-red);
  background: var(--oss-sls-red-wash);
}

body.mode-atelier .oss-dalle-resultats {
  padding-top: 1px;
}

body.mode-atelier .oss-calcul-valeurs-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px;
}

body.mode-atelier .oss-calcul-valeurs-2 > span {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background: #f8f8f8;
}

body.mode-atelier .oss-calcul-valeurs-2 > span small {
  color: var(--oss-sls-muted);
  font-size: 10.5px;
}

body.mode-atelier .oss-calcul-valeurs-2 > span b {
  color: var(--oss-sls-ink);
  font-size: 13px;
}

/* Menu Dalle : les commandes restent visibles comme commandes, mais sans réintroduire
   des couleurs de familles concurrentes à l'identité SLS. */
body.mode-atelier .cmd-famille-dalle,
body.mode-atelier .cmd-famille-charge {
  --cmd-color: var(--oss-sls-red);
  --cmd-bg: #fff;
  --cmd-active: var(--oss-sls-red-soft);
}

body.mode-atelier .cmd-famille-dalle[open],
body.mode-atelier .cmd-famille-charge[open] {
  border-color: rgba(192,0,0,.32);
}

body.mode-atelier .cmd-famille-dalle .cmd-famille-contenu,
body.mode-atelier .cmd-famille-charge .cmd-famille-contenu {
  border-color: var(--oss-sls-line);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.13);
}

body.mode-atelier .cmd-charges-dalle,
body.mode-atelier .cmd-charges-niveau {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--oss-sls-line);
}

body.mode-atelier .cmd-charges-dalle > b,
body.mode-atelier .cmd-charges-niveau > b {
  color: var(--oss-sls-ink);
  font-size: 10px;
}

body.mode-atelier .cmd-charges-dalle label,
body.mode-atelier .cmd-charges-niveau label {
  display: grid;
  grid-template-columns: minmax(100px,1fr) minmax(100px,1fr);
  align-items: center;
  gap: 7px;
  color: #3d3d3d;
  font-size: 11px;
}

body.mode-atelier .cmd-charges-dalle input,
body.mode-atelier .cmd-charges-dalle select,
body.mode-atelier .cmd-charges-niveau input,
body.mode-atelier .cmd-charges-niveau select {
  min-width: 0;
  min-height: 28px;
  border: 1px solid var(--oss-sls-line);
  border-radius: 5px;
  background: #fff;
}

body.mode-atelier .cmd-charges-dalle input:focus,
body.mode-atelier .cmd-charges-dalle select:focus,
body.mode-atelier .cmd-charges-niveau input:focus,
body.mode-atelier .cmd-charges-niveau select:focus {
  border-color: var(--oss-sls-red);
}

body.mode-atelier .cmd-charges-dalle-liste {
  display: grid;
  gap: 4px;
}

body.mode-atelier .oss-charge-dalle-ajout {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fafafa;
}

body.mode-atelier .oss-charge-dalle-ajout > b {
  color: var(--oss-sls-ink);
  font-size: 11px;
}

body.mode-atelier .oss-charge-dalle-ajout button[type="submit"] {
  justify-self: start;
  border-color: var(--oss-sls-red);
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .cmd-charges-niveau > small,
body.mode-atelier .oss-charge-dalle-ajout > small {
  color: var(--oss-sls-muted);
  font-size: 10.5px;
  line-height: 1.35;
}

/* Sélecteur de vue : le comportement reste celui du bouton 3D existant.
   "2D" indique simplement la vue active tant que le dialogue 3D n'est pas ouvert. */

@media (max-width: 1160px) {
  body.mode-atelier .oss-dalle-portee-resume {
    grid-template-columns: 82px minmax(0,1fr);
  }
  body.mode-atelier .oss-dalle-charges-resume {
    grid-template-columns: 1fr;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   TRANCHE 4 — VUE 3D : même poste de travail, même charte SLS
   Le moteur WebGL, les filtres, la sélection, les coupes et l'édition de propriétés
   restent entièrement produits par modele-3d.js / modele-3d.css.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .modele-3d {
  width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid #202020;
  border-radius: 8px;
  background: #fff;
  color: var(--oss-sls-ink);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}

body.mode-atelier .modele-3d::backdrop {
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(1px);
}

body.mode-atelier .modele-3d > header {
  min-height: 46px;
  padding: 7px 12px;
  border: 0;
  border-bottom: 3px solid var(--oss-sls-red);
  background: #111;
  color: #fff;
}

body.mode-atelier .modele-3d > header > div {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

body.mode-atelier .modele-3d > header b {
  padding-left: 0;
  border-left: 0;
  color: #fff;
  font-size: 14px;
  letter-spacing: .01em;
}

body.mode-atelier .modele-3d .nom-modele {
  overflow: hidden;
  margin-left: 10px;
  color: #bdbdbd;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .modele-3d > header [data-fermer] {
  min-height: 30px;
  border: 1px solid #454545;
  background: #1e1e1e;
  color: #fff;
  font-size: 10px;
}

body.mode-atelier .modele-3d > header [data-fermer]:hover {
  border-color: var(--oss-sls-red);
  background: var(--oss-sls-red);
  color: #fff;
}

/* Rubans 3D : bandes compactes et lisibles. */
body.mode-atelier .modele-3d .outils-3d {
  min-height: 42px;
  padding: 5px 10px;
  gap: 6px;
  border-bottom: 1px solid var(--oss-sls-line);
  background: #f7f7f7;
  color: #303030;
  font-size: 11px;
}

body.mode-atelier .modele-3d .outils-3d label {
  gap: 4px;
  white-space: nowrap;
}

body.mode-atelier .modele-3d .outils-3d input[type="checkbox"] {
  accent-color: var(--oss-sls-red);
}

body.mode-atelier .modele-3d button,
body.mode-atelier .modele-3d select,
body.mode-atelier .modele-3d input[type="number"],
body.mode-atelier .modele-3d input[type="search"] {
  min-height: 28px;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  background: #fff;
  color: var(--oss-sls-ink);
  font-size: 11px;
}

body.mode-atelier .modele-3d button:hover,
body.mode-atelier .modele-3d button:focus-visible {
  border-color: rgba(192,0,0,.45);
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .modele-3d button[aria-pressed="true"] {
  border-color: var(--oss-sls-red);
  background: var(--oss-sls-red);
  color: #fff;
}

/* Coupe = outil secondaire, toujours dans le même vocabulaire visuel. */
body.mode-atelier .modele-3d .coupe-3d {
  border-top: 0;
  background: #fff;
}

body.mode-atelier .modele-3d .coupe-3d input[type="range"] {
  accent-color: var(--oss-sls-red);
}

body.mode-atelier .modele-3d .coupe-3d [data-info-coupe] {
  color: var(--oss-sls-red-dark);
}

/* Canvas 3D : surface claire et neutre, comme le plan 2D. */
body.mode-atelier .modele-3d .espace-3d {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.98) 0 40%, rgba(244,244,244,.98) 100%);
}

body.mode-atelier .modele-3d .espace-3d canvas {
  outline: none;
}

body.mode-atelier .modele-3d .espace-3d canvas:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(192,0,0,.30);
}

/* Cube d'orientation : palette flottante compacte. */
body.mode-atelier .modele-3d .orientation-3d {
  top: 10px;
  right: 10px;
  width: 164px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--oss-sls-shadow);
}

body.mode-atelier .modele-3d .orientation-3d svg {
  width: 164px;
  height: 146px;
}

body.mode-atelier .modele-3d .orientation-3d polygon {
  stroke: #777;
}

body.mode-atelier .modele-3d .orientation-3d g:hover polygon,
body.mode-atelier .modele-3d .orientation-3d g:focus polygon {
  fill: var(--oss-sls-red-soft);
  stroke: var(--oss-sls-red);
}

body.mode-atelier .modele-3d .orientation-3d text {
  fill: #333;
  font-size: 11px;
}

body.mode-atelier .modele-3d .orientation-3d button {
  margin: 0 5px;
  min-width: 32px;
  font-size: 15px;
}

/* Statut de scène : pas une grosse carte, juste une information de contexte. */
body.mode-atelier .modele-3d .message-3d {
  left: 10px;
  top: 8px;
  max-width: calc(100% - 205px);
  margin: 0;
  padding: 5px 8px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 5px;
  background: rgba(255,255,255,.91);
  color: #555;
  font-size: 11px;
  box-shadow: none;
}

/* Liste d'éléments : navigateur local 3D. */
body.mode-atelier .modele-3d .liste-elements-3d {
  left: 10px;
  top: 46px;
  width: min(300px, calc(100% - 20px));
  padding: 8px;
  border: 1px solid var(--oss-sls-line);
  border-top: 2px solid var(--oss-sls-red);
  border-radius: 7px;
  background: #fff;
  color: var(--oss-sls-ink);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

body.mode-atelier .modele-3d .liste-elements-3d input,
body.mode-atelier .modele-3d .liste-elements-3d select {
  width: 100%;
  box-sizing: border-box;
}

body.mode-atelier .modele-3d .liste-elements-3d select {
  height: 128px;
}

body.mode-atelier .modele-3d .liste-elements-3d small {
  color: var(--oss-sls-muted);
}

/* Fiche 3D : même rôle et même hiérarchie que l'inspecteur du plan. */
body.mode-atelier .modele-3d .fiche-3d {
  left: auto;
  right: 10px;
  bottom: 10px;
  width: 318px;
  max-width: min(318px, calc(100% - 20px));
  max-height: calc(100% - 66px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--oss-sls-line);
  border-left: 1px solid var(--oss-sls-line);
  border-top: 3px solid var(--oss-sls-red);
  border-radius: 7px;
  background: #fff;
  color: var(--oss-sls-ink);
  font-size: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,.16);
}

body.mode-atelier .modele-3d .fiche-3d > p,
body.mode-atelier .modele-3d .fiche-3d > small,
body.mode-atelier .modele-3d .fiche-3d > dl,
body.mode-atelier .modele-3d .fiche-3d > button,
body.mode-atelier .modele-3d .fiche-3d > .proprietes-detail-3d {
  margin-left: 10px;
  margin-right: 10px;
}

body.mode-atelier .modele-3d .fiche-3d > p:first-child {
  margin: 0 0 2px;
  padding: 9px 10px 3px;
  color: var(--oss-sls-ink);
  font-size: 12px;
  font-weight: 800;
}

body.mode-atelier .modele-3d .fiche-3d > p:nth-child(2) {
  margin-top: 0;
  color: var(--oss-sls-muted);
  font-size: 11px;
}

body.mode-atelier .modele-3d .dimensions-selection-3d {
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 7px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

body.mode-atelier .modele-3d .dimensions-selection-3d dt {
  color: var(--oss-sls-muted);
}

body.mode-atelier .modele-3d .dimensions-selection-3d dd {
  color: var(--oss-sls-ink);
  font-weight: 750;
}

body.mode-atelier .modele-3d .proprietes-detail-3d {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--oss-sls-line);
}

body.mode-atelier .modele-3d .proprietes-detail-3d h3 {
  margin: 2px 0 7px;
  font-size: 10.5px;
}

body.mode-atelier .modele-3d .propriete-ligne-3d {
  margin: 6px 0;
  padding: 6px 0 0;
  border-top: 1px solid #ededed;
}

body.mode-atelier .modele-3d .propriete-ligne-3d label {
  color: #333;
  font-size: 11px;
}

body.mode-atelier .modele-3d .propriete-ligne-3d small,
body.mode-atelier .modele-3d .propriete-ligne-3d [role="status"] {
  color: var(--oss-sls-muted);
  font-size: 10.5px;
}

body.mode-atelier .modele-3d .fiche-3d > button {
  min-height: 27px;
  margin-top: 3px;
  margin-bottom: 3px;
}

body.mode-atelier .modele-3d .fiche-3d > button:last-of-type {
  margin-bottom: 10px;
}

/* Charges 3D : barre dédiée, mais rouge réservé à l'état actif. */
body.mode-atelier .modele-3d .commandes-charges-3d {
  min-height: 40px;
  border-top: 1px solid var(--oss-sls-line);
  border-bottom: 0;
  background: #f7f7f7;
}

body.mode-atelier .modele-3d .commandes-charges-3d [data-statut-charges] {
  flex-basis: 100%;
  color: var(--oss-sls-muted);
  font-size: 10.5px;
}

/* Barre d'état finale. */
body.mode-atelier .modele-3d > footer {
  min-height: 28px;
  padding: 5px 10px;
  border-top: 1px solid var(--oss-sls-line);
  border-bottom: 0;
  background: #111;
  color: #c9c9c9;
  font-size: 10.5px;
}

body.mode-atelier .modele-3d .table-hauteurs-3d summary {
  color: #fff;
}

body.mode-atelier .modele-3d .table-hauteurs-3d th,
body.mode-atelier .modele-3d .table-hauteurs-3d td {
  border-bottom-color: #444;
}

@media (max-width: 820px) {
  body.mode-atelier .modele-3d {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  body.mode-atelier .modele-3d .fiche-3d {
    right: 6px;
    bottom: 6px;
    width: min(300px, calc(100% - 12px));
  }

  body.mode-atelier .modele-3d .orientation-3d {
    transform: scale(.76);
    transform-origin: top right;
  }

  body.mode-atelier .modele-3d .message-3d {
    max-width: calc(100% - 145px);
  }
}

/* État du sélecteur 2D/3D synchronisé avec l'ouverture réelle du dialogue. */

/* Ruban métier : les familles ne portent plus une couleur de marque différente.
   Les couleurs techniques restent disponibles dans le dessin et les résultats. */
body.mode-atelier .cmd-famille-poteau,
body.mode-atelier .cmd-famille-voile,
body.mode-atelier .cmd-famille-poutre,
body.mode-atelier .cmd-famille-dalle,
body.mode-atelier .cmd-famille-charge,
body.mode-atelier .cmd-famille-acrotere {
  --cmd-color: var(--oss-sls-ink);
  --cmd-bg: #fff;
  --cmd-active: var(--oss-sls-red-soft);
}

body.mode-atelier .cmd-famille-poteau[open],
body.mode-atelier .cmd-famille-voile[open],
body.mode-atelier .cmd-famille-poutre[open],
body.mode-atelier .cmd-famille-dalle[open],
body.mode-atelier .cmd-famille-charge[open],
body.mode-atelier .cmd-famille-acrotere[open] {
  --cmd-color: var(--oss-sls-red);
}

body.mode-atelier .cmd-famille-poteau summary,
body.mode-atelier .cmd-famille-voile summary,
body.mode-atelier .cmd-famille-poutre summary,
body.mode-atelier .cmd-famille-dalle summary,
body.mode-atelier .cmd-famille-charge summary,
body.mode-atelier .cmd-famille-acrotere summary {
  color: var(--oss-sls-ink);
}

body.mode-atelier .cmd-famille-poteau[open] summary,
body.mode-atelier .cmd-famille-voile[open] summary,
body.mode-atelier .cmd-famille-poutre[open] summary,
body.mode-atelier .cmd-famille-dalle[open] summary,
body.mode-atelier .cmd-famille-charge[open] summary,
body.mode-atelier .cmd-famille-acrotere[open] summary {
  color: var(--oss-sls-red-dark);
}

/* Inventaire du niveau : le tableau existant devient un navigateur de familles compact.
   Aucune liste parallèle n'est créée ; les mêmes objets restent la source unique. */
body.mode-atelier #oss-inventaire {
  padding: 3px 0 5px;
}

body.mode-atelier #oss-inventaire > details {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #ededed;
  border-radius: 0;
  background: #fff;
}

body.mode-atelier #oss-inventaire > details:last-child {
  border-bottom: 0;
}

body.mode-atelier #oss-inventaire > details > summary {
  position: relative;
  min-height: 29px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px 5px 22px;
  list-style: none;
  background: #fff;
  color: var(--oss-sls-ink);
  cursor: pointer;
  font-size: 11px;
}

body.mode-atelier #oss-inventaire > details > summary::-webkit-details-marker {
  display: none;
}

body.mode-atelier #oss-inventaire > details > summary::before {
  content: "›";
  position: absolute;
  left: 9px;
  top: 50%;
  color: #777;
  font-size: 13px;
  transform: translateY(-52%);
  transition: transform .12s ease;
}

body.mode-atelier #oss-inventaire > details[open] > summary::before {
  color: var(--oss-sls-red);
  transform: translateY(-52%) rotate(90deg);
}

body.mode-atelier #oss-inventaire > details[open] > summary {
  background: var(--oss-sls-red-wash);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier #oss-inventaire > details > summary b {
  font-weight: 750;
}

body.mode-atelier #oss-inventaire table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10.5px;
}

body.mode-atelier #oss-inventaire tr {
  border-top: 1px solid #f0f0f0;
}

body.mode-atelier #oss-inventaire tr:hover {
  background: #f8f8f8;
}

body.mode-atelier #oss-inventaire td {
  padding: 5px 6px;
  overflow: hidden;
  color: #5c5c5c;
  text-overflow: ellipsis;
  vertical-align: top;
}

body.mode-atelier #oss-inventaire td:first-child {
  width: 29%;
  padding-left: 21px;
  color: var(--oss-sls-ink);
}

body.mode-atelier #oss-inventaire td:nth-child(2) {
  width: 24%;
  white-space: nowrap;
}

body.mode-atelier #oss-inventaire td:last-child {
  width: 47%;
}

body.mode-atelier #oss-inventaire .badge {
  border-color: #ddd;
  background: #f4f4f4;
  color: #555;
  font-size: 10px;
}

/* Menus d'outils du ruban : Modifier / Vue / Repères & fond et filtre de sélection. */
body.mode-atelier .cmd-menu,
body.mode-atelier .selection-filtre {
  --cmd-color: var(--oss-sls-ink);
}

body.mode-atelier .cmd-menu > summary,
body.mode-atelier .selection-filtre > summary {
  color: var(--oss-sls-ink);
  font-weight: 700;
}

body.mode-atelier .cmd-menu[open] > summary,
body.mode-atelier .cmd-menu[data-active="true"] > summary,
body.mode-atelier .selection-filtre[open] > summary {
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .cmd-menu .cmd-outils-menu,
body.mode-atelier .selection-filtre-menu {
  border: 1px solid var(--oss-sls-line);
  border-top: 2px solid var(--oss-sls-red);
  border-radius: 7px;
  background: #fff;
  color: var(--oss-sls-ink);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

body.mode-atelier .cmd-menu .cmd-outils-menu button,
body.mode-atelier .selection-filtre-menu button {
  border-color: transparent;
  background: #fff;
  color: var(--oss-sls-ink);
}

body.mode-atelier .cmd-menu .cmd-outils-menu button:hover,
body.mode-atelier .selection-filtre-menu button:hover {
  border-color: rgba(192,0,0,.18);
  background: var(--oss-sls-red-wash);
}

body.mode-atelier .selection-filtre-menu input[type="checkbox"] {
  accent-color: var(--oss-sls-red);
}

body.mode-atelier .barre-cmd .cmd-calque[aria-pressed="true"] {
  border-color: rgba(192,0,0,.32);
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
}

/* Inspecteur : le contexte sélectionné devient immédiatement lisible dans son en-tête. */
body.mode-atelier .oss-inspecteur > .oss-panneau-titre {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  gap: 1px 6px;
  align-items: center;
}

body.mode-atelier .oss-inspecteur > .oss-panneau-titre > b {
  grid-column: 1;
  grid-row: 1;
  font-size: 11px;
  font-weight: 700;
}

body.mode-atelier .oss-inspecteur > .oss-panneau-titre > #oss-inspecteur-contexte {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--oss-sls-muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-inspecteur > .oss-panneau-titre > .oss-palette-fermer {
  grid-column: 2;
  grid-row: 1 / 3;
}

body.mode-atelier .oss-inspecteur[data-contexte="selection"] > .oss-panneau-titre {
  box-shadow: inset 3px 0 0 var(--oss-sls-red);
}

body.mode-atelier .oss-inspecteur[data-contexte="selection"] > .oss-panneau-titre > #oss-inspecteur-contexte {
  color: var(--oss-sls-red-dark);
  font-size: 11px;
}

body.mode-atelier .oss-inspecteur[data-contexte="commande"] > .oss-panneau-titre > #oss-inspecteur-contexte {
  color: var(--oss-sls-ink);
}

/* Le poste de travail occupe exactement la hauteur restante sous le topbar Atelier. */

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 390 — 3D INTÉGRÉE DANS LA ZONE GRAPHIQUE CENTRALE
   Niveaux et propriétés restent à leur place. Le moteur 3D remplace seulement
   la vue du plan lorsque .oss-zone-graphique-3d est active.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-zone-graphique.oss-zone-graphique-3d {
  isolation: isolate;
}

body.mode-atelier .oss-zone-graphique.oss-zone-graphique-3d > :not(.oss-vue-3d-hote) {
  display: none !important;
}

body.mode-atelier .oss-zone-graphique > .oss-vue-3d-hote {
  position: absolute;
  inset: 0;
  z-index: 20;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d,
body.mode-atelier .modele-3d.modele-3d-integree {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d::backdrop {
  background: transparent;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > header {
  min-height: 40px;
  border-bottom-width: 2px;
}

body.mode-atelier .oss-vue-3d-hote .espace-3d {
  min-height: 180px;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > footer {
  min-height: 26px;
}

/* La fiche 3D reste une palette du centre et ne peut jamais recouvrir le navigateur
   de niveaux ni l'inspecteur de l'Atelier. */
body.mode-atelier .oss-vue-3d-hote .fiche-3d {
  right: 10px;
  bottom: 10px;
  max-height: calc(100% - 58px);
}

@media (max-width: 820px) {
  body.mode-atelier .oss-zone-graphique > .oss-vue-3d-hote {
    inset: 0;
  }

  body.mode-atelier .oss-vue-3d-hote .modele-3d {
    width: 100%;
    height: 100%;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 391 — NAVIGATEUR HIÉRARCHIQUE DU MODÈLE
   Les objets restent produits par l'éditeur de niveau. Le panneau gauche ne crée
   qu'une autre porte de sélection vers les mêmes objets.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier #oss-inventaire {
  padding: 0;
}

body.mode-atelier .oss-modele-navigateur {
  display: grid;
  gap: 2px;
  padding: 4px;
}

body.mode-atelier .oss-modele-famille {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.mode-atelier .oss-modele-famille > summary,
body.mode-atelier .oss-modele-famille.vide {
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--oss-sls-ink);
  cursor: pointer;
}

body.mode-atelier .oss-modele-famille > summary:hover {
  background: #f4f4f4;
}

body.mode-atelier .oss-modele-famille > summary span,
body.mode-atelier .oss-modele-famille.vide span {
  font-size: 10px;
  font-weight: 750;
}

body.mode-atelier .oss-modele-famille > summary b,
body.mode-atelier .oss-modele-famille.vide b {
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #ededed;
  color: #555;
  font-size: 10.5px;
  text-align: center;
}

body.mode-atelier .oss-modele-famille[open] > summary {
  background: #f8f8f8;
}

body.mode-atelier .oss-modele-famille[open] > summary span {
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-modele-famille[open] > summary b {
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-modele-famille.vide {
  opacity: .58;
  cursor: default;
}

body.mode-atelier .oss-modele-famille-liste {
  display: grid;
  gap: 1px;
  padding: 1px 0 4px 10px;
}

body.mode-atelier .oss-modele-element {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid transparent !important;
  border-radius: 5px;
  background: transparent !important;
  color: var(--oss-sls-ink) !important;
  text-align: left;
}

body.mode-atelier .oss-modele-element:hover {
  border-color: #e2e2e2 !important;
  background: #f7f7f7 !important;
}

body.mode-atelier .oss-modele-element.actif,
body.mode-atelier .oss-modele-element[aria-current="true"] {
  border-color: rgba(192,0,0,.18) !important;
  background: var(--oss-sls-red-soft) !important;
  box-shadow: inset 3px 0 0 var(--oss-sls-red);
}

body.mode-atelier .oss-modele-element-icone {
  display: grid;
  place-items: center;
  color: #555;
  font-size: 14px;
  line-height: 1;
}

body.mode-atelier .oss-modele-element.actif .oss-modele-element-icone {
  color: var(--oss-sls-red);
}

body.mode-atelier .oss-modele-element-texte {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 1px 6px;
  align-items: baseline;
}

body.mode-atelier .oss-modele-element-texte b {
  overflow: hidden;
  color: var(--oss-sls-ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-modele-element-texte small {
  color: var(--oss-sls-muted);
  font-size: 10.5px;
  white-space: nowrap;
}

body.mode-atelier .oss-modele-element-texte em {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #777;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-modele-element-texte .badge {
  padding: 1px 4px;
  border-radius: 999px;
  background: #ececec;
  color: #555;
  font-size: 10px;
}

body.mode-atelier .oss-modele-alerte {
  color: #9b1c1c;
  font-weight: 700;
}

body.mode-atelier .oss-repli:has(.oss-modele-navigateur) {
  overflow: hidden;
}

body.mode-atelier .oss-repli:has(.oss-modele-navigateur) > summary {
  background: #f7f7f7;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 392 — VUES ET CALQUES DANS LE NAVIGATEUR GAUCHE
   Les commandes existantes sont relogées ; ces styles n'ajoutent aucun état.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-vues-navigateur,
body.mode-atelier .oss-calques-navigateur {
  display: grid;
  gap: 2px;
  padding: 4px;
}

body.mode-atelier .oss-vues-navigateur button {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--oss-sls-ink);
  text-align: left;
}

body.mode-atelier .oss-vues-navigateur button:hover {
  border-color: #e2e2e2;
  background: #f7f7f7;
}

body.mode-atelier .oss-vues-navigateur button.actif,
body.mode-atelier .oss-vues-navigateur button[aria-current="true"] {
  border-color: rgba(192,0,0,.18);
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
  box-shadow: inset 3px 0 0 var(--oss-sls-red);
}

body.mode-atelier .oss-vues-navigateur button > span {
  display: grid;
  place-items: center;
  color: #666;
  font-size: 13px;
}

body.mode-atelier .oss-vues-navigateur button.actif > span {
  color: var(--oss-sls-red);
}

body.mode-atelier .oss-vues-navigateur button > b {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-calques-navigateur {
  padding-bottom: 6px;
}

body.mode-atelier .oss-calque-ligne {
  min-height: 30px;
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 7px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--oss-sls-ink) !important;
  font-size: 11px !important;
}

body.mode-atelier label.oss-calque-ligne:hover,
body.mode-atelier button.oss-calque-ligne:hover {
  border-color: #e2e2e2 !important;
  background: #f7f7f7 !important;
}

body.mode-atelier .oss-calque-ligne input[type="checkbox"] {
  margin: 0;
  accent-color: var(--oss-sls-red);
}

body.mode-atelier .oss-calque-ligne select {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 26px;
  margin-top: 2px;
  border: 1px solid var(--oss-sls-line);
  border-radius: 5px;
  background: #fff;
  color: var(--oss-sls-ink);
  font-size: 10.5px;
}

body.mode-atelier button.oss-calque-bouton {
  grid-template-columns: 22px minmax(0,1fr);
  justify-content: stretch;
  text-align: left;
}

body.mode-atelier button.oss-calque-bouton[aria-pressed="true"] {
  border-color: rgba(192,0,0,.18) !important;
  background: var(--oss-sls-red-soft) !important;
  color: var(--oss-sls-red-dark) !important;
}

body.mode-atelier .oss-vues-repli > summary,
body.mode-atelier .oss-calques-repli > summary {
  background: #f7f7f7;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 393 — BARRE DE MENUS DESKTOP
   Façade de navigation uniquement : chaque entrée appelle une commande existante.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-menu-principal {
  color: var(--oss-sls-ink);
  user-select: none;
}

body.mode-atelier .oss-menu-principal > details > summary,
body.mode-atelier .oss-menu-principal > .oss-menu-direct {
  list-style: none;
  color: #272727;
  font: inherit;
  cursor: default;
}

body.mode-atelier .oss-menu-principal > details > summary::-webkit-details-marker {
  display: none;
}

body.mode-atelier .oss-menu-principal > details > summary:hover,
body.mode-atelier .oss-menu-principal > details[open] > summary,
body.mode-atelier .oss-menu-principal > .oss-menu-direct:hover,
body.mode-atelier .oss-menu-principal > .oss-menu-direct[aria-pressed="true"] {
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-menu-principal > details > div[role="menu"] {
  position: absolute;
  z-index: 120;
  left: 0;
  top: 100%;
  width: max-content;
  min-width: 210px;
  max-width: 310px;
  display: grid;
  gap: 1px;
  padding: 5px;
  border: 1px solid var(--oss-sls-line-strong);
  border-top: 2px solid var(--oss-sls-red);
  border-radius: 0 0 7px 7px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}

body.mode-atelier .oss-menu-principal [role="menu"] > button {
  min-height: 28px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  color: var(--oss-sls-ink);
  font: inherit;
  text-align: left;
  white-space: nowrap;
}

body.mode-atelier .oss-menu-principal [role="menu"] > button:hover:not(:disabled) {
  border-color: rgba(192,0,0,.16);
  background: var(--oss-sls-red-wash);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-menu-principal [role="menu"] > button:disabled {
  color: #aaa;
  background: #fff;
  cursor: default;
}

body.mode-atelier .oss-menu-principal [role="menu"] > button[aria-pressed="true"] {
  color: var(--oss-sls-red-dark);
  font-weight: 700;
}

body.mode-atelier .oss-menu-principal .oss-menu-separateur {
  height: 1px;
  margin: 3px 5px;
  background: #e2e2e2;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 395 — AIDE ET BARRE D'ÉTAT
   L'aide lit les raccourcis du ruban ; le pied lit le niveau et la vue du DOM courant.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier dialog.oss-aide-raccourcis {
  width: min(520px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 40px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--oss-sls-line-strong);
  border-top: 3px solid var(--oss-sls-red);
  border-radius: 8px;
  background: #fff;
  color: var(--oss-sls-ink);
  box-shadow: 0 22px 54px rgba(0,0,0,.22);
}

body.mode-atelier dialog.oss-aide-raccourcis::backdrop {
  background: rgba(0,0,0,.28);
}

body.mode-atelier .oss-aide-raccourcis > section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

body.mode-atelier .oss-aide-raccourcis header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--oss-sls-line);
  background: #fafafa;
}

body.mode-atelier .oss-aide-raccourcis h2 {
  margin: 2px 0 0;
  color: var(--oss-sls-ink);
  font-size: 16px;
}

body.mode-atelier .oss-aide-raccourcis header button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #555;
  font-size: 20px;
  line-height: 1;
}

body.mode-atelier .oss-aide-raccourcis header button:hover {
  border-color: var(--oss-sls-line);
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-aide-raccourcis > section > .note {
  margin: 0;
  padding: 10px 16px 6px;
  color: var(--oss-sls-muted);
  font-size: 11px;
}

body.mode-atelier .oss-aide-raccourcis-liste {
  min-height: 0;
  display: grid;
  gap: 1px;
  overflow: auto;
  padding: 5px 10px 10px;
}

body.mode-atelier .oss-aide-raccourcis-liste > div {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 5px 7px;
  border-radius: 5px;
}

body.mode-atelier .oss-aide-raccourcis-liste > div:hover {
  background: #f7f7f7;
}

body.mode-atelier .oss-aide-raccourcis kbd {
  justify-self: start;
  min-width: 28px;
  padding: 2px 6px;
  border: 1px solid #cfcfcf;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff;
  color: var(--oss-sls-red-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

body.mode-atelier .oss-aide-raccourcis-liste span {
  min-width: 0;
  color: var(--oss-sls-ink);
  font-size: 10px;
}

body.mode-atelier .oss-aide-raccourcis footer {
  padding: 8px 16px;
  border-top: 1px solid var(--oss-sls-line);
  background: #fafafa;
  color: var(--oss-sls-muted);
}

/* Le vrai #zone-vue est déjà relogé dans #oss-console par app.js. On l'enrichit sans
   produire une seconde barre d'état. */
body.mode-atelier #oss-console #zone-vue {
  min-width: 0;
  flex: 1 1 auto;
}

body.mode-atelier #oss-console .barre-etat {
  white-space: nowrap;
}

body.mode-atelier #oss-console .barre-etat > span {
  min-width: 0;
}

body.mode-atelier #oss-console .oss-etat-contexte {
  color: #4a4a4a;
}

body.mode-atelier #oss-console .oss-etat-contexte b {
  overflow: hidden;
  max-width: 140px;
  color: var(--oss-sls-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier #oss-console .oss-etat-contexte [data-etat-vue] {
  color: var(--oss-sls-red-dark);
  font-weight: 750;
}

body.mode-atelier #oss-console .oss-etat-contexte-sep {
  display: none;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 396 — ONGLETS DE L'INSPECTEUR DROIT
   Les onglets pilotent la visibilité des blocs existants sans déplacer leur logique.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-inspecteur-onglets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  min-height: 34px;
  padding: 0 7px;
  border-bottom: 1px solid var(--oss-sls-line);
  background: #fff;
}

body.mode-atelier .oss-inspecteur-onglets button {
  min-width: 0;
  min-height: 33px;
  padding: 6px 4px 5px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #5d5d5d;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

body.mode-atelier .oss-inspecteur-onglets button:hover {
  background: var(--oss-sls-red-wash);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-inspecteur-onglets button.actif,
body.mode-atelier .oss-inspecteur-onglets button[aria-selected="true"] {
  border-bottom-color: var(--oss-sls-red);
  background: #fff;
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-inspecteur-onglets button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid rgba(192,0,0,.26);
  outline-offset: -2px;
}

body.mode-atelier #oss-inspecteur .oss-section[hidden],
body.mode-atelier #oss-inspecteur #oss-fond-repli[hidden] {
  display: none !important;
}

body.mode-atelier #oss-inspecteur[data-onglet="proprietes"] .oss-section-actions,
body.mode-atelier #oss-inspecteur[data-onglet="proprietes"] .oss-section-proprietes,
body.mode-atelier #oss-inspecteur[data-onglet="ddc"] .oss-section-ddc,
body.mode-atelier #oss-inspecteur[data-onglet="fond"] #oss-fond-repli {
  animation: oss-inspecteur-apparition 90ms ease-out;
}

@keyframes oss-inspecteur-apparition {
  from { opacity: .72; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1120px) {
  body.mode-atelier .oss-inspecteur-onglets button {
    font-size: 10.5px;
    padding-inline: 2px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 397 — PALETTES REDIMENSIONNABLES
   Les largeurs restent un état d'interface de la session JS.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-poignee-palette {
  position: absolute;
  z-index: 30;
  top: 0;
  bottom: 0;
  width: 8px;
  display: block;
  cursor: ew-resize;
  touch-action: none;
  outline: none;
}

body.mode-atelier .oss-poignee-gauche {
  right: -4px;
}

body.mode-atelier .oss-poignee-droite {
  left: -4px;
}

body.mode-atelier .oss-poignee-palette::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: transparent;
  transition: background 90ms ease, box-shadow 90ms ease;
}

body.mode-atelier .oss-poignee-palette:hover::before,
body.mode-atelier .oss-poignee-palette.actif::before,
body.mode-atelier .oss-poignee-palette:focus-visible::before {
  background: var(--oss-sls-red);
  box-shadow: 0 0 0 2px rgba(192,0,0,.09);
}

body.mode-atelier .oss-poignee-palette:focus-visible {
  outline: none;
}

@media (max-width: 1040px) {
  body.mode-atelier .oss-poignee-palette {
    display: none;
  }

  

  
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 398 — RUBAN CAO COMPACT
   Présentation uniquement : la structure DOM et tous les gestionnaires restent inchangés.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-commandes .cmd-famille > summary,
body.mode-atelier .oss-commandes .cmd-menu > summary,
body.mode-atelier .oss-commandes .cmd-famille-directe > button,
body.mode-atelier .oss-commandes .cmd-groupe > button {
  color: var(--oss-sls-ink);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

body.mode-atelier .oss-commandes .cmd-famille > summary .cmd-picto,
body.mode-atelier .oss-commandes .cmd-menu > summary .cmd-picto,
body.mode-atelier .oss-commandes .cmd-famille-directe > button .cmd-picto,
body.mode-atelier .oss-commandes .cmd-groupe > button .cmd-picto {
  color: #333;
  font-weight: 700;
}

body.mode-atelier .oss-commandes .cmd-famille[open] > summary,
body.mode-atelier .oss-commandes .cmd-famille[data-active="true"] > summary,
body.mode-atelier .oss-commandes .cmd-menu[open] > summary,
body.mode-atelier .oss-commandes .cmd-menu[data-active="true"] > summary,
body.mode-atelier .oss-commandes .cmd-famille-directe > button[aria-pressed="true"],
body.mode-atelier .oss-commandes .cmd-groupe > button[aria-pressed="true"] {
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-commandes .cmd-famille[open] > summary .cmd-picto,
body.mode-atelier .oss-commandes .cmd-menu[open] > summary .cmd-picto,
body.mode-atelier .oss-commandes .cmd-famille-directe > button[aria-pressed="true"] .cmd-picto,
body.mode-atelier .oss-commandes .cmd-groupe > button[aria-pressed="true"] .cmd-picto {
  color: var(--oss-sls-red);
}

body.mode-atelier .oss-commandes .cmd-chevron {
  color: #777;
}

body.mode-atelier .oss-commandes .cmd-raccourci {
  color: #666;
  font-weight: 750;
  text-align: center;
}

body.mode-atelier .oss-commandes .cmd-instruction {
  color: var(--oss-sls-ink);
}

body.mode-atelier .oss-commandes .cmd-instruction b {
  color: var(--oss-sls-red-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-commandes .cmd-instruction em {
  color: #6b6b6b;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-commandes .cmd-outils-menu,
body.mode-atelier .oss-commandes .cmd-variantes-menu,
body.mode-atelier .oss-commandes .selection-filtre-menu {
  z-index: 140;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 399 — FINITION DU PLAN CENTRAL CAO
   Grille et HUD dérivés de l'interface existante ; aucun impact sur le SVG métier.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-plan-courant .oss-plan-dessin {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(rgba(0,0,0,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.018) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.040) 1px, transparent 1px),
    #fff;
  background-size:
    16px 16px,
    16px 16px,
    80px 80px,
    80px 80px;
  background-position: -1px -1px;
}

body.mode-atelier .oss-plan-courant .oss-plan-dessin > #oss-plan,
body.mode-atelier .oss-plan-courant .oss-plan-dessin > #zone-plan {
  position: relative;
  z-index: 1;
}

body.mode-atelier .oss-plan-hud {
  position: absolute;
  z-index: 4;
  left: 11px;
  top: 10px;
  max-width: min(440px, calc(100% - 22px));
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 8px;
  pointer-events: none;
  border: 1px solid rgba(0,0,0,.10);
  border-left: 2px solid var(--oss-sls-red);
  border-radius: 5px;
  background: rgba(255,255,255,.92);
  color: #666;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
  backdrop-filter: blur(3px);
  font-size: 10.5px;
  line-height: 1;
}

body.mode-atelier .oss-plan-hud .oss-plan-hud-cmd {
  overflow: hidden;
  max-width: 150px;
  color: var(--oss-sls-red-dark);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-plan-hud .oss-plan-hud-sep {
  color: #aaa;
}

body.mode-atelier .oss-plan-hud [data-hud-zoom] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-plan-axes {
  position: absolute;
  z-index: 4;
  left: 13px;
  bottom: 12px;
  width: 48px;
  height: 48px;
  pointer-events: none;
  color: #777;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

body.mode-atelier .oss-plan-axes::before,
body.mode-atelier .oss-plan-axes::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: #777;
}

body.mode-atelier .oss-plan-axes::before {
  width: 25px;
  height: 1px;
}

body.mode-atelier .oss-plan-axes::after {
  width: 1px;
  height: 25px;
}

body.mode-atelier .oss-plan-axes > i::before,
body.mode-atelier .oss-plan-axes > i::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

body.mode-atelier .oss-plan-axes > i::before {
  right: 9px;
  bottom: 9px;
  border-left: 5px solid #777;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

body.mode-atelier .oss-plan-axes > i::after {
  left: 9px;
  top: 8px;
  border-bottom: 5px solid #777;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

body.mode-atelier .oss-plan-axes .axe-x {
  position: absolute;
  right: 0;
  bottom: 8px;
}

body.mode-atelier .oss-plan-axes .axe-y {
  position: absolute;
  left: 8px;
  top: 0;
}

body.mode-atelier .oss-plan-dessin.oss-plan-hud-masque > .oss-plan-hud,
body.mode-atelier .oss-plan-dessin.oss-plan-hud-masque > .oss-plan-axes {
  display: none;
}

body.mode-atelier .oss-plan-courant .oss-plan-dessin:focus-within {
  box-shadow: inset 0 0 0 1px rgba(192,0,0,.12);
}

@media (max-width: 760px) {
  body.mode-atelier .oss-plan-hud {
    right: 8px;
    left: 8px;
    max-width: none;
  }

  body.mode-atelier .oss-plan-hud [data-hud-zoom] {
    display: none;
  }

  body.mode-atelier .oss-plan-axes {
    transform: scale(.86);
    transform-origin: left bottom;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 400 — BANDEAU PROJET COMPACT
   Présentation uniquement : identité, phases et commandes gardent leurs producteurs.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-bandeau-decisions {
  min-height: 50px;
  grid-template-columns: minmax(220px,.78fr) auto minmax(430px,1.5fr);
  gap: 8px;
  padding: 4px 9px;
  background: #fbfbfb;
  border-bottom-color: var(--oss-sls-line-strong);
}

body.mode-atelier .oss-identite {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  row-gap: 0;
}

body.mode-atelier .oss-identite .sur-titre {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--oss-sls-red-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.mode-atelier .oss-identite > span:not(.sur-titre) {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.mode-atelier .oss-identite strong {
  overflow: hidden;
  max-width: 230px;
  color: var(--oss-sls-ink);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-identite > small {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--oss-sls-muted);
  font-size: 10px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-identite .oss-navigation-basculer {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
}

body.mode-atelier .oss-niveau-courant {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-color: rgba(192,0,0,.22);
  border-radius: 999px;
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
  font-size: 10.5px;
  font-weight: 800;
}

body.mode-atelier .oss-phases {
  min-height: 29px;
  border-color: #cfcfcf;
  border-radius: 5px;
  background: #efefef;
}

body.mode-atelier .oss-phases button {
  min-width: 78px;
  min-height: 28px;
  padding: 3px 9px;
  color: #444;
  font-size: 11px;
  font-weight: 750;
}

body.mode-atelier .oss-phases button.actif {
  background: var(--oss-sls-red);
  color: #fff;
  box-shadow: none;
}

body.mode-atelier .oss-globales > button,
body.mode-atelier .oss-globales > a,
body.mode-atelier .oss-globales > details > summary,
body.mode-atelier .oss-donnees-contexte > button,
body.mode-atelier .oss-option-degression {
  min-height: 27px;
  border-color: #d6d6d6;
  border-radius: 5px;
  background: #fff;
  color: #333;
  font-size: 10.5px;
}

body.mode-atelier .oss-globales > button,
body.mode-atelier .oss-globales > a,
body.mode-atelier .oss-globales > details > summary,
body.mode-atelier .oss-donnees-contexte > button {
  padding: 4px 7px;
}

body.mode-atelier .oss-globales > button:hover:not(:disabled),
body.mode-atelier .oss-globales > a:hover,
body.mode-atelier .oss-globales > details > summary:hover,
body.mode-atelier .oss-donnees-contexte > button:hover {
  border-color: rgba(192,0,0,.24);
  background: var(--oss-sls-red-wash);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-option-degression {
  padding: 2px 6px;
}

body.mode-atelier .oss-option-degression > input {
  width: 13px;
  height: 13px;
  margin: 0 4px 0 0;
  accent-color: var(--oss-sls-red);
}

body.mode-atelier .oss-option-degression span {
  gap: 0;
}

body.mode-atelier .oss-option-degression span b {
  font-size: 10.5px;
  font-weight: 750;
}

body.mode-atelier .oss-option-degression span small {
  font-size: 10px;
}

body.mode-atelier .oss-globales .oss-calculer {
  min-height: 30px;
  padding: 4px 11px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
}

body.mode-atelier .oss-globales .oss-calculer > span {
  font-size: 10.5px;
}

body.mode-atelier .oss-donnees-contexte,
body.mode-atelier .oss-menu-global {
  position: relative;
}

body.mode-atelier .oss-donnees-panneau,
body.mode-atelier .oss-menu-global > div {
  z-index: 160;
}

@media (max-width: 1360px) {
  body.mode-atelier .oss-bandeau-decisions {
    grid-template-columns: minmax(195px,.72fr) auto minmax(360px,1.35fr);
    gap: 5px;
  }

  body.mode-atelier .oss-identite strong {
    max-width: 175px;
  }

  body.mode-atelier .oss-globales .oss-sortir-modele,
  body.mode-atelier .oss-option-degression span small {
    display: none;
  }
}

@media (max-width: 1100px) {
  body.mode-atelier .oss-bandeau-decisions {
    grid-template-columns: minmax(190px,1fr) auto;
    min-height: 76px;
  }

  
}

@media (max-width: 760px) {
  body.mode-atelier .oss-bandeau-decisions {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 6px;
  }

  body.mode-atelier .oss-phases {
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  body.mode-atelier .oss-phases button {
    min-width: 0;
  }

  
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 401 — INSPECTEUR DROIT DENSE TYPE CAO
   Mise en forme uniquement : les formulaires et leurs gestionnaires restent inchangés.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier #oss-inspecteur .oss-section,
body.mode-atelier #oss-inspecteur details,
body.mode-atelier #oss-inspecteur .carte {
  margin: 4px 5px;
  border-radius: 5px;
}

body.mode-atelier #oss-inspecteur .oss-section h3,
body.mode-atelier #oss-inspecteur details > summary {
  min-height: 27px;
  display: flex;
  align-items: center;
  padding: 5px 7px;
  font-size: 11px;
}

body.mode-atelier #oss-inspecteur #oss-proprietes,
body.mode-atelier #oss-inspecteur #oss-actions,
body.mode-atelier #oss-inspecteur #oss-ddc,
body.mode-atelier #oss-inspecteur #oss-fond {
  min-width: 0;
}

body.mode-atelier #oss-inspecteur .nv-props-directes {
  display: grid;
  gap: 5px;
}

body.mode-atelier #oss-inspecteur .oss-prop-carte {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid #dedede;
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
}

body.mode-atelier #oss-inspecteur .oss-prop-entete {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-bottom: 1px solid #e5e5e5;
  background: #f7f7f7;
}

body.mode-atelier #oss-inspecteur .oss-prop-entete > b {
  min-width: 0;
  overflow: hidden;
  color: var(--oss-sls-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier #oss-inspecteur .oss-prop-entete .badge {
  margin-left: auto;
  border-color: #d7d7d7;
  background: #fff;
  color: #555;
  font-size: 10px;
}

/* 464 : une propriété par ligne, libellé puis valeur, comme la maquette SLS2. */
body.mode-atelier #oss-inspecteur .oss-prop-champs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(96px, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 6px 2px;
  border-bottom: 1px solid #eeeeee;
  background: #fff;
  color: #3a3a3a;
  font-size: 12px;
  line-height: 1.3;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label:last-child {
  border-bottom: 0;
}

/* Point 479 : la définition d'une propriété (origine, propositions, garde-fous) tient toute la
   largeur, sous le libellé ; son champ reprend la taille des champs de la fiche. */
body.mode-atelier #oss-inspecteur .oss-prop-champs > label > .oss-fiche {
  grid-column: 1 / -1;
}
body.mode-atelier #oss-inspecteur .oss-prop-champs > label > .oss-fiche > input,
body.mode-atelier #oss-inspecteur .oss-prop-champs > label > .oss-fiche > select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label:hover {
  background: #fbfbfb;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label > input,
body.mode-atelier #oss-inspecteur .oss-prop-champs > label > select {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label > .note,
body.mode-atelier #oss-inspecteur .oss-prop-champs > label > .oss-prop-mode-auto,
body.mode-atelier #oss-inspecteur .oss-prop-champs > label > .oss-prop-regle,
body.mode-atelier #oss-inspecteur .oss-prop-champs > label > button {
  grid-column: 1 / -1;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label > .note {
  margin: -1px 0 0;
  color: #777;
  font-size: 10px;
  line-height: 1.25;
}

body.mode-atelier #oss-inspecteur .oss-prop-auto {
  border-color: rgba(192,0,0,.22);
  background:
    linear-gradient(90deg, var(--oss-sls-red-wash), #fff 34%);
}

body.mode-atelier #oss-inspecteur .oss-prop-mode-auto {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  color: #777;
  font-size: 10px;
}

body.mode-atelier #oss-inspecteur .oss-prop-mode-auto > b {
  padding: 1px 4px;
  border: 1px solid rgba(192,0,0,.24);
  border-radius: 3px;
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
  font-size: 10px;
  letter-spacing: .04em;
}

body.mode-atelier #oss-inspecteur .oss-prop-regle {
  margin: 1px 0 0;
  border: 0;
  border-top: 1px dotted #ddd;
  border-radius: 0;
  background: transparent;
}

body.mode-atelier #oss-inspecteur .oss-prop-regle > summary {
  min-height: 22px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #666;
  font-size: 10px;
}

body.mode-atelier #oss-inspecteur .oss-prop-regle > small {
  display: block;
  padding: 1px 0 1px 6px;
  color: #777;
  font-size: 10px;
}

body.mode-atelier #oss-inspecteur .oss-prop-reutiliser {
  justify-self: start;
  min-height: 22px;
  padding: 2px 6px;
  border-color: #d9d9d9;
  background: #fff;
  color: #555;
  font-size: 10px;
}

body.mode-atelier #oss-inspecteur .oss-prop-reutiliser:hover {
  border-color: rgba(192,0,0,.25);
  background: var(--oss-sls-red-wash);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier #oss-inspecteur .oss-prop-calcul,
body.mode-atelier #oss-inspecteur [class*="oss-prop-calcul-"] {
  font-size: 10.5px;
}

body.mode-atelier #oss-inspecteur .oss-prop-calcul-sous-titre {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 7px;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #ececec;
  background: #f8f8f8;
}

body.mode-atelier #oss-inspecteur .oss-prop-calcul-sous-titre > b {
  color: var(--oss-sls-ink);
  font-size: 10.5px;
}

body.mode-atelier #oss-inspecteur .oss-prop-calcul-sous-titre > span {
  color: var(--oss-sls-muted);
  font-size: 10px;
}

body.mode-atelier #oss-inspecteur input,
body.mode-atelier #oss-inspecteur select,
body.mode-atelier #oss-inspecteur textarea {
  box-shadow: none;
}

body.mode-atelier #oss-inspecteur button:not(.oss-palette-fermer):not([role="tab"]) {
  min-height: 25px;
  border-radius: 4px;
  font-size: 10.5px;
}

body.mode-atelier #oss-inspecteur .note,
body.mode-atelier #oss-inspecteur small {
  line-height: 1.3;
}

@media (max-width: 1120px) {
  body.mode-atelier #oss-inspecteur .oss-prop-champs > label {
    grid-template-columns: minmax(82px,.85fr) minmax(90px,1.15fr);
    padding-inline: 6px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 402 — FINITION VISUELLE DE LA 3D INTÉGRÉE
   Le moteur WebGL et les producteurs 3D restent inchangés.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-vue-3d-hote .modele-3d {
  color: var(--oss-sls-ink);
  background: #fff;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > header {
  min-height: 38px;
  padding: 5px 9px;
  border-bottom: 1px solid var(--oss-sls-line-strong);
  background: #fbfbfb;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > header > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > header b {
  padding-left: 7px;
  border-left: 3px solid var(--oss-sls-red);
  color: var(--oss-sls-ink);
  font-size: 11px;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d .nom-modele {
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  color: var(--oss-sls-muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > header [data-fermer] {
  min-height: 26px;
  padding: 3px 7px;
  border-color: #d7d7d7;
  border-radius: 4px;
  background: #fff;
  color: #444;
  font-size: 10.5px;
}

body.mode-atelier .oss-vue-3d-hote .outils-3d {
  min-height: 34px;
  gap: 5px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--oss-sls-line);
  background: #fff;
  font-size: 10.5px;
}

body.mode-atelier .oss-vue-3d-hote .outils-3d label {
  gap: 3px;
  min-height: 25px;
  color: #444;
  font-size: 10.5px;
  white-space: nowrap;
}

body.mode-atelier .oss-vue-3d-hote .outils-3d input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--oss-sls-red);
}

body.mode-atelier .oss-vue-3d-hote .modele-3d button,
body.mode-atelier .oss-vue-3d-hote .modele-3d select,
body.mode-atelier .oss-vue-3d-hote .modele-3d input[type="number"],
body.mode-atelier .oss-vue-3d-hote .modele-3d input[type="search"] {
  min-height: 25px;
  padding: 3px 6px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  color: var(--oss-sls-ink);
  font-size: 10.5px;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d button:hover:not(:disabled),
body.mode-atelier .oss-vue-3d-hote .modele-3d button:focus-visible,
body.mode-atelier .oss-vue-3d-hote .modele-3d select:focus,
body.mode-atelier .oss-vue-3d-hote .modele-3d input:focus {
  border-color: rgba(192,0,0,.28);
  background: var(--oss-sls-red-wash);
  color: var(--oss-sls-red-dark);
  outline: none;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d button[aria-pressed="true"] {
  border-color: rgba(192,0,0,.30);
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-vue-3d-hote .coupe-3d {
  background: #f7f7f7;
}

body.mode-atelier .oss-vue-3d-hote .coupe-3d [data-reglage-coupe]:not([hidden]) {
  gap: 6px;
}

body.mode-atelier .oss-vue-3d-hote .coupe-3d input[type="range"] {
  width: 140px;
  accent-color: var(--oss-sls-red);
}

body.mode-atelier .oss-vue-3d-hote .coupe-3d [data-info-coupe] {
  color: #6d3b3b;
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .espace-3d {
  background:
    radial-gradient(circle at 50% 45%, #fafafa 0, #f1f1f1 68%, #e9e9e9 100%);
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d {
  top: 8px;
  right: 8px;
  width: 150px;
  padding: 5px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 7px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d svg {
  width: 140px;
  height: 126px;
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d polygon {
  stroke: #777;
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d g:hover polygon,
body.mode-atelier .oss-vue-3d-hote .orientation-3d g:focus polygon {
  fill: var(--oss-sls-red-soft);
  stroke: var(--oss-sls-red);
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d text {
  fill: #444;
  font-size: 11px;
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d button {
  min-width: 28px;
  min-height: 25px;
  margin: 0 2px;
  padding: 0 5px;
  font-size: 13px;
}

body.mode-atelier .oss-vue-3d-hote .choix-vue {
  margin: 4px;
  color: #555;
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .message-3d {
  left: 9px;
  top: 8px;
  max-width: calc(100% - 190px);
  margin: 0;
  padding: 5px 7px;
  border: 1px solid rgba(0,0,0,.08);
  border-left: 2px solid var(--oss-sls-red);
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  color: #555;
  font-size: 10.5px;
}

body.mode-atelier .oss-vue-3d-hote .liste-elements-3d {
  left: 9px;
  top: 44px;
  width: min(300px,calc(100% - 18px));
  padding: 7px;
  border: 1px solid var(--oss-sls-line-strong);
  border-top: 2px solid var(--oss-sls-red);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  font-size: 10.5px;
}

body.mode-atelier .oss-vue-3d-hote .liste-elements-3d label {
  margin-bottom: 5px;
  font-size: 10.5px;
}

body.mode-atelier .oss-vue-3d-hote .liste-elements-3d select {
  height: 116px;
}

body.mode-atelier .oss-vue-3d-hote .fiche-3d {
  left: 9px;
  right: auto;
  bottom: 9px;
  width: 300px;
  max-width: min(300px,calc(100% - 18px));
  max-height: calc(100% - 54px);
  padding: 7px 9px;
  border: 1px solid var(--oss-sls-line-strong);
  border-left: 3px solid var(--oss-sls-red);
  border-radius: 5px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 10px 28px rgba(0,0,0,.13);
  color: var(--oss-sls-ink);
  font-size: 10.5px;
}

body.mode-atelier .oss-vue-3d-hote .fiche-3d p {
  margin: 4px 0;
}

body.mode-atelier .oss-vue-3d-hote .fiche-3d p:first-child {
  color: var(--oss-sls-red-dark);
  font-size: 11px;
}

body.mode-atelier .oss-vue-3d-hote .proprietes-detail-3d {
  margin-top: 6px;
  padding-top: 5px;
  border-top-color: #ddd;
}

body.mode-atelier .oss-vue-3d-hote .proprietes-detail-3d h3 {
  margin: 3px 0;
  font-size: 11px;
}

body.mode-atelier .oss-vue-3d-hote .propriete-ligne-3d {
  margin: 5px 0;
  padding: 4px 0;
  border-top-color: #ececec;
}

body.mode-atelier .oss-vue-3d-hote .commandes-charges-3d {
  border-top: 1px solid var(--oss-sls-line-strong);
  background: #fafafa;
}

body.mode-atelier .oss-vue-3d-hote .commandes-charges-3d [data-statut-charges] {
  flex-basis: auto;
  min-width: 160px;
  color: #666;
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > footer {
  min-height: 24px;
  gap: 8px;
  padding: 3px 8px;
  border-top: 1px solid var(--oss-sls-line);
  background: #fff;
  color: #777;
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .table-hauteurs-3d {
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .table-hauteurs-3d summary {
  color: var(--oss-sls-red-dark);
}

body.mode-atelier .oss-vue-3d-hote .table-hauteurs-3d th,
body.mode-atelier .oss-vue-3d-hote .table-hauteurs-3d td {
  padding: 2px 5px;
  border-bottom-color: #e5e5e5;
}

@media (max-width: 900px) {
  body.mode-atelier .oss-vue-3d-hote .outils-3d {
    gap: 4px;
  }

  body.mode-atelier .oss-vue-3d-hote .orientation-3d {
    transform: scale(.82);
    transform-origin: top right;
  }

  body.mode-atelier .oss-vue-3d-hote .fiche-3d {
    width: min(280px,calc(100% - 18px));
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — SHELL ATELIER ALIGNÉ SUR LA MAQUETTE DE RÉFÉRENCE
   Structure d'écran uniquement : barre d'application, toolbar, navigateur projet,
   viewport central et inspecteur. Les producteurs, commandes et moteurs existants restent
   les seules sources de données et de gestes.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier {
  --oss-ui-blue: #1677e8;
  --oss-ui-blue-dark: #0d5fbf;
  --oss-ui-blue-soft: #eaf3ff;
  --oss-ui-blue-line: #a9cdf8;
  --oss-ui-shell: #eef3f8;
  --oss-ui-panel: #f7f9fc;
  --oss-ui-line: #d9e1ea;
  --oss-ui-line-strong: #bfcbd8;
  --oss-ui-text: #1f2937;
  --oss-ui-muted: #6d7a88;
  background: var(--oss-ui-shell);
}

/* Barre d'application : même hiérarchie que la maquette desktop. */
body.mode-atelier .oss-appbar {
  color: var(--oss-ui-text);
}

body.mode-atelier .oss-appbar-marque {
  white-space: nowrap;
}

body.mode-atelier .oss-appbar-symbole {
  color: var(--oss-ui-blue);
  font-weight: 900;
}

body.mode-atelier .oss-appbar-marque strong {
  font-weight: 760;
  letter-spacing: .005em;
}

body.mode-atelier .oss-appbar .oss-menu-principal > details > summary,
body.mode-atelier .oss-appbar .oss-menu-principal > .oss-menu-direct {
  color: #334155;
  font-weight: 550;
}

body.mode-atelier .oss-appbar .oss-menu-principal > details[open] > summary,
body.mode-atelier .oss-appbar .oss-menu-principal > details > summary:hover,
body.mode-atelier .oss-appbar .oss-menu-principal > .oss-menu-direct:hover {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-appbar .oss-identite strong {
  color: #334155;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-appbar .oss-navigation-basculer {
  color: #64748b;
}

body.mode-atelier .oss-appbar-phases button {
  color: #526071;
}

body.mode-atelier .oss-appbar-phases button.actif {
  color: var(--oss-ui-blue-dark);
}

/* Toolbar CAO : les vrais contrôles existants, regroupés dans une seule bande. */

body.mode-atelier .oss-outils-shell .oss-globales > .oss-sortir-modele,
body.mode-atelier .oss-outils-shell #oss-decisions-ouvrir,
body.mode-atelier .oss-outils-shell .oss-option-degression,
body.mode-atelier .oss-outils-shell #oss-reperage-auto,
body.mode-atelier .oss-outils-shell #oss-documents {
  display: none;
}

body.mode-atelier .oss-outils-shell .oss-donnees-contexte {
  position: static;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
body.mode-atelier .oss-outils-shell .oss-donnees-contexte > #oss-donnees-ouvrir {
  display: none;
}
body.mode-atelier .oss-outils-shell .oss-donnees-panneau {
  position: absolute;
  z-index: 180;
  top: calc(100% + 4px);
  right: 8px;
}

body.mode-atelier .oss-outils-shell .oss-calculer {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--oss-ui-line-strong);
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

body.mode-atelier .oss-outils-shell .oss-calculer:hover {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

/* 464 : couleurs d'état du ruban reprises par atelier-poste.css (sans !important). */

body.mode-atelier .oss-commandes .cmd-picto {
  color: #26374a;
}

body.mode-atelier .oss-commandes [aria-pressed="true"] .cmd-picto,
body.mode-atelier .oss-commandes .actif .cmd-picto {
  color: var(--oss-ui-blue);
}

/* Trois zones permanentes de la maquette. */

body.mode-atelier .oss-panneau-titre {
  min-height: 38px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--oss-ui-line);
  background: #f7f9fc;
}

body.mode-atelier .oss-panneau-titre b {
  color: #26374a;
  font-size: 12px;
}

body.mode-atelier .oss-panneau-titre small {
  color: var(--oss-ui-muted);
  font-size: 10.5px;
}

/* Navigateur Projet continu : plus de cartes flottantes empilées. */
body.mode-atelier .oss-projet-racine {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--oss-ui-line);
  background: #fff;
}

body.mode-atelier .oss-projet-racine > span:last-child {
  min-width: 0;
}

body.mode-atelier .oss-projet-racine b,
body.mode-atelier .oss-projet-racine small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .oss-projet-racine b {
  color: #26374a;
  font-size: 10.5px;
}

body.mode-atelier .oss-projet-racine small {
  margin-top: 2px;
  color: var(--oss-ui-muted);
  font-size: 10.5px;
}

body.mode-atelier .oss-projet-icone {
  flex: 0 0 auto;
  color: var(--oss-ui-blue);
  font-size: 15px;
}

body.mode-atelier .oss-pilote .oss-repli {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--oss-ui-line);
  border-radius: 0;
  background: #fff;
}

body.mode-atelier .oss-pilote .oss-repli > summary {
  min-height: 31px;
  padding: 6px 9px;
  border: 0;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

body.mode-atelier .oss-pilote .oss-repli[open] > summary {
  border-bottom: 0;
  background: #fff;
  color: #334155;
}

body.mode-atelier .oss-niveaux-repli .oss-arbre {
  padding: 0 7px 6px 18px;
}

body.mode-atelier .oss-niveau {
  min-height: 28px;
  margin: 0;
  padding: 3px 6px;
  border: 0;
  border-radius: 4px;
  color: #334155;
  box-shadow: none;
}

body.mode-atelier .oss-niveau:hover {
  background: #f2f6fb;
}

body.mode-atelier .oss-niveau.actif {
  border: 0;
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
  box-shadow: inset 3px 0 0 var(--oss-ui-blue);
}

body.mode-atelier .oss-niveau.actif .oss-niveau-icone,
body.mode-atelier .oss-niveau.actif b {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier #oss-inventaire {
  padding: 0 7px 6px 18px;
}

body.mode-atelier #oss-inventaire > details {
  border-bottom-color: #edf1f5;
}

body.mode-atelier #oss-inventaire > details > summary {
  min-height: 27px;
  padding: 4px 6px 4px 19px;
  color: #465568;
  font-size: 11px;
}

body.mode-atelier #oss-inventaire > details[open] > summary {
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier #oss-inventaire > details[open] > summary::before {
  color: var(--oss-ui-blue);
}

body.mode-atelier .oss-vues-navigateur,
body.mode-atelier .oss-calques-navigateur {
  padding: 0 7px 7px 18px;
}

body.mode-atelier .oss-vues-navigateur button {
  min-height: 27px;
  border: 0 !important;
  border-radius: 4px;
  color: #465568;
}

body.mode-atelier .oss-vues-navigateur button.actif {
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
  box-shadow: inset 3px 0 0 var(--oss-ui-blue);
}

body.mode-atelier .oss-controles-repli {
  margin-top: auto;
}

/* Viewport central : le dessin, pas le chrome, domine. */

body.mode-atelier .at-plan-hote {
  background: #fff;
}

body.mode-atelier .oss-plan-dessin {
  background:
    linear-gradient(rgba(83,103,126,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,103,126,.045) 1px, transparent 1px),
    #fff;
  background-size: 24px 24px;
}

body.mode-atelier .oss-plan-courant > .oss-vue-titre {
  position: absolute;
  z-index: 25;
  left: auto;
  right: 14px;
  top: auto;
  bottom: 14px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

body.mode-atelier .oss-plan-courant > .oss-vue-titre .oss-vue-identite {
  display: none;
}

body.mode-atelier .oss-plan-courant > .oss-vue-titre .oss-vue-actions {
  pointer-events: auto;
}

body.mode-atelier .oss-plan-courant > .oss-vue-titre .oss-vue-actions > :not(.oss-niveau-rapide) {
  display: none !important;
}

body.mode-atelier .oss-plan-courant .oss-niveau-rapide > span {
  display: none;
}

body.mode-atelier .oss-plan-courant .oss-niveau-rapide select {
  min-width: 132px;
  min-height: 34px;
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--oss-ui-line-strong);
  border-radius: 7px;
  background: rgba(255,255,255,.96);
  color: #334155;
  font-size: 10px;
  font-weight: 650;
  box-shadow: 0 3px 10px rgba(31,41,55,.10);
}

/* Inspecteur : toutes les sections utiles restent visibles ensemble. */
body.mode-atelier .oss-inspecteur-onglets {
  display: none !important;
}

body.mode-atelier #oss-inspecteur .oss-section,
body.mode-atelier #oss-inspecteur details,
body.mode-atelier .at-droite .carte {
  margin: 8px 9px;
  border: 1px solid var(--oss-ui-line);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

body.mode-atelier #oss-inspecteur .oss-section h3,
body.mode-atelier #oss-inspecteur details > summary,
body.mode-atelier .at-droite .at-panneau-entete {
  border-bottom-color: var(--oss-ui-line);
  background: #f7f9fc;
  color: #26374a;
}

body.mode-atelier #oss-inspecteur .oss-section h3 {
  padding: 7px 8px;
  font-size: 10.5px;
}

body.mode-atelier #oss-inspecteur .oss-section-ddc {
  display: block;
}

body.mode-atelier #oss-inspecteur input:focus,
body.mode-atelier #oss-inspecteur select:focus {
  border-color: var(--oss-ui-blue);
  box-shadow: 0 0 0 2px rgba(22,119,232,.10);
}

/* Sélection et vues : le bleu porte l'interaction ; rouge/vert restent aux verdicts métier. */
body.mode-atelier .oss-vues-navigateur button.actif,
body.mode-atelier .oss-palette-bouton[aria-pressed="true"],
body.mode-atelier .oss-vue-bascule button[aria-pressed="true"] {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}
body.mode-atelier .oss-commandes button[aria-pressed="true"],
body.mode-atelier .oss-commandes button.actif {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-console {
  color: #64748b;
}

/* Retour développeur 21/09 : à 1530–1570 px, aucune phase ne doit être
   recouverte par l'identité du projet. Le projet reste lisible dans le navigateur gauche ;
   sous 1580 px, on libère donc la barre pour les menus et les trois phases. */
body.mode-atelier .oss-appbar-phases {
  white-space: nowrap;
}

/* Analyse/Exploitation ne doivent jamais présenter un grand écran blanc pendant les
   appels DDC. Le calque est purement informatif et disparaît dès le premier rendu. */

body.mode-atelier .at-chargement {
  position: absolute;
  z-index: 35;
  inset: 44px 0 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 24px;
  background: rgba(248,250,252,.92);
  color: #334155;
  text-align: center;
  pointer-events: none;
}

body.mode-atelier .at-chargement[hidden] {
  display: none;
}

body.mode-atelier .at-chargement b {
  font-size: 11px;
}

body.mode-atelier .at-chargement small {
  color: var(--oss-ui-muted);
  font-size: 11px;
}

body.mode-atelier .at-chargement-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #d7e4f3;
  border-top-color: var(--oss-ui-blue);
  border-radius: 50%;
  animation: oss-chargement-tourne .8s linear infinite;
}

body.mode-atelier .at-chargement-panneau {
  display: grid;
  gap: 8px;
  padding: 14px 12px;
}

body.mode-atelier .at-chargement-panneau i {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,#eef2f6 25%,#f8fafc 50%,#eef2f6 75%);
  background-size: 200% 100%;
  animation: oss-chargement-glisse 1.2s ease-in-out infinite;
}

body.mode-atelier .at-chargement-panneau i:nth-child(2n) {
  width: 72%;
}

body.mode-atelier .atelier:not(.at-en-chargement) .at-chargement-panneau {
  display: none;
}

@keyframes oss-chargement-tourne {
  to { transform: rotate(360deg); }
}

@keyframes oss-chargement-glisse {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-atelier .at-chargement-spinner,
  body.mode-atelier .at-chargement-panneau i {
    animation: none;
  }
}

/* Même squelette sur Analyse / Exploitation. */

body.mode-atelier .atelier .at-outils-plan {
  border-bottom: 1px solid var(--oss-ui-line);
  background: #fff;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 2 : DENSITÉ POSTE CAO
   Le chrome doit s'effacer au profit du plan. Cette couche finale ne change ni le DOM
   métier ni les commandes ; elle fixe seulement les proportions et la densité visuelle
   du poste de travail de référence.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Ruban : une ligne d'outils compacte, pas une rangée de grosses tuiles. */

body.mode-atelier .oss-commandes .cmd-instruction b {
  color: var(--oss-ui-blue-dark);
}

/* 464 : couleurs d'état du ruban reprises par atelier-poste.css (sans !important). */

/* 464 : couleurs d'état du ruban reprises par atelier-poste.css (sans !important). */

body.mode-atelier .oss-commandes .cmd-variantes-menu button:hover,
body.mode-atelier .oss-commandes .cmd-outils-menu button:hover,
body.mode-atelier .oss-commandes .selection-filtre-menu button:hover {
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-outils-shell .oss-calculer {
  min-height: 34px;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 10.5px;
}

/* Proportions de la maquette : navigateur fin, inspecteur technique stable, plan dominant. */

body.mode-atelier .oss-panneau-titre {
  min-height: 32px;
  padding: 5px 8px;
  background: #f4f7fa;
}

body.mode-atelier .oss-panneau-titre b {
  font-size: 10.5px;
}

body.mode-atelier .oss-panneau-titre small {
  font-size: 10.5px;
}

body.mode-atelier .oss-projet-racine {
  min-height: 39px;
  gap: 7px;
  padding: 5px 8px;
}

body.mode-atelier .oss-projet-racine b {
  font-size: 11px;
}

body.mode-atelier .oss-projet-racine small {
  margin-top: 1px;
  font-size: 10px;
}

body.mode-atelier .oss-projet-icone {
  font-size: 13px;
}

body.mode-atelier .oss-pilote .oss-repli > summary {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 11px;
}

body.mode-atelier .oss-niveaux-repli .oss-arbre {
  padding: 0 6px 5px 15px;
}

body.mode-atelier .oss-niveau {
  min-height: 25px;
  padding: 2px 5px;
  border-radius: 2px;
}

body.mode-atelier .oss-niveau small {
  font-size: 10.5px;
}

body.mode-atelier #oss-inventaire,
body.mode-atelier .oss-vues-navigateur,
body.mode-atelier .oss-calques-navigateur {
  padding-left: 15px;
  padding-right: 6px;
}

body.mode-atelier #oss-inventaire > details > summary,
body.mode-atelier .oss-vues-navigateur button {
  min-height: 25px;
  border-radius: 2px;
  font-size: 10.5px;
}

/* Inspecteur plat : sections empilées comme une palette de propriétés CAO. */
body.mode-atelier #oss-inspecteur .oss-section,
body.mode-atelier #oss-inspecteur details,
body.mode-atelier .at-droite .carte {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--oss-ui-line);
  border-radius: 0;
}

body.mode-atelier #oss-inspecteur .oss-section h3,
body.mode-atelier #oss-inspecteur details > summary,
body.mode-atelier .at-droite .at-panneau-entete {
  min-height: 28px;
  padding: 5px 8px;
  background: #f4f7fa;
  font-size: 11px;
}

body.mode-atelier #oss-inspecteur input,
body.mode-atelier #oss-inspecteur select,
body.mode-atelier .at-droite input,
body.mode-atelier .at-droite select {
  min-height: 26px;
  border-radius: 3px;
  font-size: 11px;
}

/* Le viewport reste la zone la plus calme : grille fine, commandes flottantes minimales. */
body.mode-atelier .oss-plan-courant .oss-plan-dessin,
body.mode-atelier .oss-plan-dessin {
  background:
    linear-gradient(rgba(83,103,126,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,103,126,.032) 1px, transparent 1px),
    #fff;
  background-size: 22px 22px;
}

body.mode-atelier .oss-plan-courant > .oss-vue-titre {
  right: 10px;
  bottom: 10px;
}

body.mode-atelier .oss-plan-courant .oss-niveau-rapide select {
  min-width: 124px;
  min-height: 30px;
  padding: 4px 25px 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  box-shadow: 0 2px 7px rgba(31,41,55,.08);
}

/* Barre d'état très basse, comme dans un logiciel de dessin. */

body.mode-atelier .oss-poignee-palette:hover::before,
body.mode-atelier .oss-poignee-palette.actif::before,
body.mode-atelier .oss-poignee-palette:focus-visible::before {
  background: var(--oss-ui-blue);
  box-shadow: 0 0 0 2px rgba(22,119,232,.10);
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — FINITION INTERACTIVE BLEUE
   Le rouge/orange/vert reste disponible aux verdicts métier. Le chrome interactif du
   poste (arbre, HUD, propriétés automatiques et contrôles 3D) suit le bleu de la maquette.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-plan-hud {
  border-left-color: var(--oss-ui-blue);
}

body.mode-atelier .oss-plan-hud .oss-plan-hud-cmd {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-modele-famille[open] > summary span {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-modele-famille[open] > summary b {
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-modele-element.actif,
body.mode-atelier .oss-modele-element[aria-current="true"] {
  border-color: var(--oss-ui-blue-line) !important;
  background: var(--oss-ui-blue-soft) !important;
  box-shadow: inset 3px 0 0 var(--oss-ui-blue);
}

body.mode-atelier .oss-modele-element.actif .oss-modele-element-icone,
body.mode-atelier .oss-modele-element[aria-current="true"] .oss-modele-element-icone {
  color: var(--oss-ui-blue);
}

body.mode-atelier #oss-inspecteur .oss-prop-auto {
  border-color: var(--oss-ui-blue-line);
  background: linear-gradient(90deg, var(--oss-ui-blue-soft), #fff 34%);
}

body.mode-atelier #oss-inspecteur .oss-prop-mode-auto > b {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier #oss-inspecteur .oss-prop-reutiliser:hover {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

/* Vue 3D intégrée : mêmes conventions de sélection que le plan 2D. */
body.mode-atelier .oss-vue-3d-hote .modele-3d > header b {
  border-left-color: var(--oss-ui-blue);
}

body.mode-atelier .oss-vue-3d-hote .outils-3d input[type="checkbox"],
body.mode-atelier .oss-vue-3d-hote .coupe-3d input[type="range"] {
  accent-color: var(--oss-ui-blue);
}

body.mode-atelier .oss-vue-3d-hote .modele-3d button:hover:not(:disabled),
body.mode-atelier .oss-vue-3d-hote .modele-3d button:focus-visible,
body.mode-atelier .oss-vue-3d-hote .modele-3d select:focus,
body.mode-atelier .oss-vue-3d-hote .modele-3d input:focus {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-vue-3d-hote .modele-3d button[aria-pressed="true"] {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d g:hover polygon,
body.mode-atelier .oss-vue-3d-hote .orientation-3d g:focus polygon {
  fill: var(--oss-ui-blue-soft);
  stroke: var(--oss-ui-blue);
}

body.mode-atelier .oss-vue-3d-hote .message-3d {
  border-left-color: var(--oss-ui-blue);
}

body.mode-atelier .oss-vue-3d-hote .liste-elements-3d {
  border-top-color: var(--oss-ui-blue);
}

body.mode-atelier .oss-vue-3d-hote .fiche-3d {
  border-left-color: var(--oss-ui-blue);
}

body.mode-atelier .oss-vue-3d-hote .fiche-3d p:first-child,
body.mode-atelier .oss-vue-3d-hote .table-hauteurs-3d summary {
  color: var(--oss-ui-blue-dark);
}

/* Analyse et Exploitation gardent leur intention métier, mais sous forme d'une barre de
   contexte de CAO — pas d'un bandeau de page web entre la toolbar et le dessin. */

body.mode-atelier .oss-phase-verbe {
  padding: 2px 5px;
  border-left-color: var(--oss-ui-blue);
  color: var(--oss-ui-blue-dark);
  font-size: 10.5px;
}

body.mode-atelier .oss-phase-repere strong {
  font-size: 11px;
}

body.mode-atelier .oss-phase-repere small {
  font-size: 10.5px;
}

body.mode-atelier .oss-phase-repere > button {
  min-height: 22px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10.5px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — GARDE-FOU CHROME BLEU
   Les règles historiques SLS sont plus générales et peuvent réinjecter du rouge selon
   la phase. Cette couche finale borne explicitement le CHROME interactif. Elle ne cible
   ni .danger, ni les alertes, ni les classes de verdict/résultat métier.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .ossature button[aria-pressed="true"],
body.mode-atelier .ossature button.actif,
body.mode-atelier .ossature .actif > button {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .ossature .principal:not(.danger) {
  border-color: var(--oss-ui-blue);
  background: var(--oss-ui-blue);
  color: #fff;
}

body.mode-atelier .atelier .sel,
body.mode-atelier .atelier [aria-selected="true"],
body.mode-atelier .atelier .ligne-arbre.sel,
body.mode-atelier .atelier .niveau-actif {
  background: var(--oss-ui-blue-soft);
  color: #26374a;
  box-shadow: inset 3px 0 0 var(--oss-ui-blue);
}

body.mode-atelier .atelier .sel b,
body.mode-atelier .atelier [aria-selected="true"] b {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .atelier svg .selection,
body.mode-atelier .atelier svg [data-selection="true"],
body.mode-atelier .atelier svg .choisi {
  stroke: var(--oss-ui-blue) !important;
}

body.mode-atelier .at-droite input:focus,
body.mode-atelier .at-droite select:focus,
body.mode-atelier .cmd-charges-dalle input:focus,
body.mode-atelier .cmd-charges-dalle select:focus,
body.mode-atelier .cmd-charges-niveau input:focus,
body.mode-atelier .cmd-charges-niveau select:focus {
  border-color: var(--oss-ui-blue);
  box-shadow: 0 0 0 2px rgba(22,119,232,.10);
}

body.mode-atelier .oss-menu button:hover,
body.mode-atelier .menu-contextuel button:hover {
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-vues button[aria-pressed="true"],
body.mode-atelier [data-vue][aria-pressed="true"],
body.mode-atelier .oss-niveau-courant {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-dalle-portee-vignette {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-dalle-portee-vignette .nv-appui-dessin {
  border-color: var(--oss-ui-blue) !important;
  color: var(--oss-ui-blue);
}

body.mode-atelier .oss-dalle-portee-vignette small,
body.mode-atelier .oss-dalle-menu-note {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-dalle-menu-note {
  border-left-color: var(--oss-ui-blue);
  background: var(--oss-ui-blue-soft);
}

body.mode-atelier .oss-charge-dalle-ajout button[type="submit"] {
  border-color: var(--oss-ui-blue);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier #oss-inventaire > details[open] > summary {
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier #oss-inventaire > details[open] > summary::before {
  color: var(--oss-ui-blue);
}

body.mode-atelier .cmd-menu .cmd-outils-menu,
body.mode-atelier .selection-filtre-menu {
  border-top-color: var(--oss-ui-blue);
}

body.mode-atelier .selection-filtre-menu input[type="checkbox"],
body.mode-atelier .oss-calque-ligne input[type="checkbox"],
body.mode-atelier .oss-option-degression > input {
  accent-color: var(--oss-ui-blue);
}

body.mode-atelier .barre-cmd .cmd-calque[aria-pressed="true"],
body.mode-atelier button.oss-calque-bouton[aria-pressed="true"] {
  border-color: var(--oss-ui-blue-line) !important;
  background: var(--oss-ui-blue-soft) !important;
  color: var(--oss-ui-blue-dark) !important;
}

body.mode-atelier .oss-inspecteur[data-contexte="selection"] > .oss-panneau-titre {
  box-shadow: inset 3px 0 0 var(--oss-ui-blue);
}

body.mode-atelier .oss-inspecteur[data-contexte="selection"] > .oss-panneau-titre > #oss-inspecteur-contexte,
body.mode-atelier .oss-vues-navigateur button.actif > span {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-menu-principal > details > summary:hover,
body.mode-atelier .oss-menu-principal > details[open] > summary,
body.mode-atelier .oss-menu-principal > .oss-menu-direct:hover,
body.mode-atelier .oss-menu-principal > .oss-menu-direct[aria-pressed="true"] {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-menu-principal > details > div[role="menu"] {
  border-top-color: var(--oss-ui-blue);
}

body.mode-atelier .oss-menu-principal [role="menu"] > button:hover:not(:disabled) {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-menu-principal [role="menu"] > button[aria-pressed="true"] {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier dialog.oss-aide-raccourcis {
  border-top-color: var(--oss-ui-blue);
}

body.mode-atelier .oss-aide-raccourcis header button:hover {
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-aide-raccourcis kbd,
body.mode-atelier #oss-console .oss-etat-contexte [data-etat-vue],
body.mode-atelier .oss-identite .sur-titre {
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .oss-globales > button:hover:not(:disabled),
body.mode-atelier .oss-globales > a:hover,
body.mode-atelier .oss-globales > details > summary:hover,
body.mode-atelier .oss-donnees-contexte > button:hover {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .cmd-famille-poteau,
body.mode-atelier .cmd-famille-voile,
body.mode-atelier .cmd-famille-poutre,
body.mode-atelier .cmd-famille-dalle,
body.mode-atelier .cmd-famille-charge,
body.mode-atelier .cmd-famille-acrotere {
  --cmd-color: #26374a;
  --cmd-active: var(--oss-ui-blue-soft);
}

body.mode-atelier .cmd-famille-poteau[open],
body.mode-atelier .cmd-famille-voile[open],
body.mode-atelier .cmd-famille-poutre[open],
body.mode-atelier .cmd-famille-dalle[open],
body.mode-atelier .cmd-famille-charge[open],
body.mode-atelier .cmd-famille-acrotere[open] {
  --cmd-color: var(--oss-ui-blue);
  border-color: var(--oss-ui-blue-line);
}

body.mode-atelier .cmd-famille-poteau[open] summary,
body.mode-atelier .cmd-famille-voile[open] summary,
body.mode-atelier .cmd-famille-poutre[open] summary,
body.mode-atelier .cmd-famille-dalle[open] summary,
body.mode-atelier .cmd-famille-charge[open] summary,
body.mode-atelier .cmd-famille-acrotere[open] summary {
  border-color: var(--oss-ui-blue-line) !important;
  background: var(--oss-ui-blue-soft) !important;
  color: var(--oss-ui-blue-dark) !important;
}
body.mode-atelier .oss-commandes .selection-filtre[open] > summary {
  color: var(--oss-ui-blue-dark) !important;
}

/* Palette Propriétés : une table technique continue, sans carte dans la carte. */
body.mode-atelier #oss-inspecteur .oss-prop-carte {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--oss-ui-line);
  border-radius: 0;
  background: #fff;
}

body.mode-atelier #oss-inspecteur .oss-prop-entete {
  min-height: 28px;
  padding: 4px 8px;
  border-bottom-color: var(--oss-ui-line);
  background: #f4f7fa;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label {
  padding: 4px 8px;
  border-bottom-color: #edf0f3;
  border-radius: 0;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label:hover {
  background: #f8fbff;
}

/* Arbre Éléments : même densité que l'arbre Niveaux de la maquette. */
body.mode-atelier .oss-modele-navigateur {
  gap: 0;
  padding: 2px 4px 4px;
}

body.mode-atelier .oss-modele-famille > summary,
body.mode-atelier .oss-modele-famille.vide {
  min-height: 26px;
  padding: 4px 5px;
  border-radius: 2px;
}

body.mode-atelier .oss-modele-element {
  min-height: 27px;
  grid-template-columns: 18px minmax(0,1fr);
  gap: 4px;
  padding: 3px 5px;
  border-radius: 2px;
}

body.mode-atelier .oss-modele-element-icone {
  font-size: 12px;
}

body.mode-atelier .oss-modele-element-texte b {
  font-size: 11px;
}

body.mode-atelier .oss-modele-element-texte small,
body.mode-atelier .oss-modele-element-texte em {
  font-size: 10px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 3 : SUPPRIMER LE RELIQUAT WEB-APP
   Analyse / Exploitation héritent encore de cartes et de boutons issus de l'ancien
   écran web. Cette couche finale les transforme en palettes et rubans de poste CAO.
   Aucune donnée, commande ou règle métier n'est modifiée.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Les deux palettes de lecture deviennent des surfaces continues, pas des piles de cartes. */

body.mode-atelier .atelier .at-gauche > .carte,
body.mode-atelier .atelier .at-droite > .carte,
body.mode-atelier .atelier .at-fiche {
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--oss-ui-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.mode-atelier .atelier .at-gauche > .carte:last-child,
body.mode-atelier .atelier .at-droite > .carte:last-child {
  border-bottom: 0;
}

body.mode-atelier .atelier .at-gauche .carte-alerte,
body.mode-atelier .atelier .at-droite .carte-alerte {
  border-left: 3px solid #c8871a;
  background: #fffaf0;
}

body.mode-atelier .atelier .at-panneau-entete {
  min-height: 24px;
  align-items: center;
  padding: 0 0 4px;
  border-bottom: 1px solid #edf0f3;
}

body.mode-atelier .atelier .at-panneau-entete .sur-titre,
body.mode-atelier .atelier .at-panneau-entete h3 {
  color: #26374a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}

/* Niveaux : lignes d'arbre compactes au lieu de boutons-cartes. */
body.mode-atelier .atelier .at-niv {
  min-height: 25px;
  margin: 0;
  padding: 3px 6px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #334155;
  font-size: 10.5px;
  line-height: 1.2;
}

body.mode-atelier .atelier .at-niv:hover {
  background: #f2f6fb;
}

body.mode-atelier .atelier .at-niv.actif {
  border: 0;
  background: var(--oss-ui-blue-soft);
  color: #26374a;
  box-shadow: inset 3px 0 0 var(--oss-ui-blue);
}

body.mode-atelier .atelier .at-niv b {
  font-size: 11px;
  font-weight: 650;
}

body.mode-atelier .atelier .at-niv .note,
body.mode-atelier .atelier .at-niv small {
  color: #758292;
  font-size: 10px;
}

/* Le ruban DDC devient un ruban de logiciel : faible hauteur, petits groupes, peu de relief. */
body.mode-atelier .atelier .at-ruban-ddc {
  padding: 0;
  border: 0;
  background: #fff;
}

body.mode-atelier .atelier .at-ruban-contexte {
  min-height: 24px;
  margin: 0;
  padding: 2px 6px;
  gap: 6px;
  border-bottom: 1px solid var(--oss-ui-line);
  background: #f6f8fa;
  color: #687789;
  font-size: 10.5px;
}

body.mode-atelier .atelier .at-ruban-contexte b {
  color: #26374a;
  font-size: 11px;
  font-weight: 700;
}

body.mode-atelier .atelier .at-commandes-ddc {
  min-height: 34px;
  gap: 3px 6px;
  padding: 3px 5px;
  background: #fff;
}

body.mode-atelier .atelier .at-cmd-bloc {
  gap: 1px;
  padding-right: 6px;
  border-right-color: var(--oss-ui-line);
}

body.mode-atelier .atelier .at-cmd-bloc > small {
  color: #738091;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .035em;
}

body.mode-atelier .atelier .at-cmd-bloc button,
body.mode-atelier .atelier .at-commandes-cadre button,
body.mode-atelier .atelier .at-calques-menu > summary {
  min-height: 23px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10.5px;
}

body.mode-atelier .atelier .at-niveau-rapide select,
body.mode-atelier .atelier .at-cmd-bloc select {
  min-height: 24px;
  height: 24px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 2px;
  font-size: 10.5px;
}

body.mode-atelier .atelier .at-commandes-cadre {
  gap: 2px;
}

/* En Exploitation, contexte + commandes restent réellement sur une seule bande compacte. */
body.mode-atelier .ossature[data-phase="resultats"] .at-ruban-ddc {
  min-height: 34px;
  gap: 4px 6px;
  padding: 2px 5px;
  border-bottom: 1px solid var(--oss-ui-line);
}

body.mode-atelier .ossature[data-phase="resultats"] .at-ruban-contexte {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.mode-atelier .ossature[data-phase="resultats"] .at-commandes-ddc {
  min-height: 28px;
  padding: 0;
}

body.mode-atelier .ossature[data-phase="resultats"] .at-cmd-bloc {
  gap: 3px;
  padding-right: 5px;
}

/* Le viewport est la zone calme : pas de marge de carte autour du dessin. */
body.mode-atelier .atelier .at-plan-hote {
  padding: 0;
  background: #eef2f6;
}

body.mode-atelier .atelier .at-plan-hote .niveau-calque {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

/* Les sous-fiches techniques restent sémantiques, mais sans aplats décoratifs. */
body.mode-atelier .atelier .at-degression,
body.mode-atelier .atelier .at-efforts-fiche {
  margin-top: 5px;
  padding: 5px 7px;
  border-radius: 0;
  background: #fff;
}

body.mode-atelier .atelier .at-efforts-fiche {
  border-left-color: var(--oss-ui-blue-line);
}

body.mode-atelier .atelier .at-effort-extremum,
body.mode-atelier .atelier .at-porteur-critique {
  padding: 4px 5px;
  border-radius: 2px;
  background: #fff;
}

/* Les contrôles secondaires utilisent l'accent bleu ; les couleurs fortes restent aux verdicts. */
body.mode-atelier .atelier .principal:not(.danger),
body.mode-atelier .atelier button.principal:not(.danger) {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .atelier .at-calques-menu[open] > summary,
body.mode-atelier .atelier .at-palette-bouton[aria-pressed="true"] {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 4 : CHROME HAUT NEUTRE
   Le ruban doit ressembler à un outil de production, pas à une page avec CTA.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .ossature .oss-outils-shell .oss-calculer {
  min-height: 32px;
  padding: 3px 8px;
  border: 1px solid var(--oss-ui-line-strong);
  border-radius: 3px;
  background: #fff;
  color: #334155;
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: none;
}

body.mode-atelier .ossature .oss-outils-shell .oss-calculer > span {
  color: var(--oss-ui-blue);
}

body.mode-atelier .ossature .oss-outils-shell .oss-calculer:hover:not(:disabled),
body.mode-atelier .ossature .oss-outils-shell .oss-calculer:focus-visible {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .ossature .oss-appbar-phases button {
  font-weight: 600;
}

body.mode-atelier .ossature .oss-appbar-phases button.actif {
  color: var(--oss-ui-blue-dark);
}

/* Les séparateurs structurent mieux qu'une succession de tuiles. */

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 5 : PALETTES ET VIEWPORT
   Densité finale du navigateur gauche, du plan central et de l'inspecteur droit.
   Les panneaux deviennent des palettes de production continues ; le plan garde la place.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Navigateur gauche : hiérarchie d'arbre plus serrée, sans gros en-tête de carte. */
body.mode-atelier .oss-panneau-titre {
  min-height: 29px;
  padding: 4px 7px;
}

body.mode-atelier .oss-panneau-titre b {
  font-size: 11px;
}

body.mode-atelier .oss-panneau-titre small {
  font-size: 10px;
}

body.mode-atelier .oss-projet-racine {
  min-height: 34px;
  gap: 6px;
  padding: 4px 7px;
}

body.mode-atelier .oss-projet-racine b {
  font-size: 11px;
}

body.mode-atelier .oss-projet-racine small {
  font-size: 10px;
}

body.mode-atelier .oss-projet-icone {
  font-size: 12px;
}

body.mode-atelier .oss-pilote .oss-repli > summary {
  min-height: 25px;
  padding: 4px 7px;
  font-size: 10.5px;
}

body.mode-atelier .oss-niveaux-repli .oss-arbre {
  padding: 0 5px 4px 13px;
}

body.mode-atelier .oss-niveau {
  min-height: 23px;
  padding: 2px 4px;
  border-radius: 1px;
  font-size: 10.5px;
}

body.mode-atelier .oss-niveau small {
  font-size: 10px;
}

body.mode-atelier #oss-inventaire,
body.mode-atelier .oss-vues-navigateur,
body.mode-atelier .oss-calques-navigateur {
  padding: 0 5px 4px 13px;
}

body.mode-atelier #oss-inventaire > details > summary,
body.mode-atelier .oss-vues-navigateur button,
body.mode-atelier .oss-calques-navigateur label {
  min-height: 23px;
  padding-block: 3px;
  border-radius: 1px;
  font-size: 10.5px;
}

/* Inspecteur : même densité que le navigateur, lecture verticale continue. */
body.mode-atelier #oss-inspecteur .oss-section h3,
body.mode-atelier #oss-inspecteur details > summary,
body.mode-atelier .at-droite .at-panneau-entete {
  min-height: 25px;
  padding: 4px 7px;
  font-size: 11px;
}

body.mode-atelier #oss-inspecteur .oss-prop-entete {
  min-height: 24px;
  padding: 3px 7px;
}

body.mode-atelier #oss-inspecteur .oss-prop-entete > b {
  font-size: 11px;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label {
  min-height: 25px;
  grid-template-columns: minmax(82px,.85fr) minmax(88px,1.15fr);
  gap: 3px 6px;
  padding: 3px 7px;
  font-size: 10.5px;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label > input,
body.mode-atelier #oss-inspecteur .oss-prop-champs > label > select,
body.mode-atelier #oss-inspecteur input,
body.mode-atelier #oss-inspecteur select,
body.mode-atelier .at-droite input,
body.mode-atelier .at-droite select {
  min-height: 23px;
  height: 23px;
  border-radius: 2px;
  font-size: 10.5px;
}

body.mode-atelier #oss-inspecteur .oss-prop-champs > label > .note {
  font-size: 10px;
}

/* Le niveau flottant doit ressembler à un contrôle de viewport, pas à un bouton de formulaire. */
body.mode-atelier .oss-plan-courant > .oss-vue-titre {
  right: 8px;
  bottom: 8px;
}

body.mode-atelier .oss-plan-courant .oss-niveau-rapide select {
  min-width: 118px;
  min-height: 27px;
  height: 27px;
  padding: 3px 23px 3px 7px;
  border-radius: 3px;
  font-size: 10.5px;
  box-shadow: 0 1px 4px rgba(31,41,55,.08);
}

/* Les palettes portent la structure ; le fond du viewport reste presque blanc. */

body.mode-atelier .oss-plan-courant .oss-plan-dessin,
body.mode-atelier .oss-plan-dessin,
body.mode-atelier .atelier .at-plan-hote {
  background:
    linear-gradient(rgba(83,103,126,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,103,126,.025) 1px, transparent 1px),
    #fff;
  background-size: 22px 22px;
}

/* Les poignées restent découvrables sans créer une troisième colonne visuelle. */
body.mode-atelier .oss-poignee-palette {
  width: 5px;
}

body.mode-atelier .oss-poignee-palette::before {
  width: 1px;
  opacity: .55;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 6 : 3D DANS LE MEME POSTE
   La vue 3D intégrée garde son moteur, mais adopte la même densité et le même chrome
   bleu que le plan 2D. Elle ne doit plus évoquer une modale historique.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .oss-vue-3d-hote .modele-3d {
  background: #fff;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > header {
  min-height: 30px;
  padding: 3px 7px;
  border-bottom: 1px solid var(--oss-ui-line);
  background: #f6f8fa;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > header > div {
  gap: 5px;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > header b {
  padding-left: 5px;
  border-left: 2px solid var(--oss-ui-blue);
  font-size: 11px;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d .nom-modele {
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d > header [data-fermer] {
  min-height: 22px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .outils-3d {
  min-height: 30px;
  gap: 4px;
  padding: 3px 6px;
  border-bottom-color: var(--oss-ui-line);
  background: #fff;
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .outils-3d label {
  min-height: 22px;
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .outils-3d input[type="checkbox"] {
  width: 12px;
  height: 12px;
}

body.mode-atelier .oss-vue-3d-hote .modele-3d button,
body.mode-atelier .oss-vue-3d-hote .modele-3d select,
body.mode-atelier .oss-vue-3d-hote .modele-3d input[type="number"],
body.mode-atelier .oss-vue-3d-hote .modele-3d input[type="search"] {
  min-height: 22px;
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d {
  top: 7px;
  right: 7px;
  width: 136px;
  padding: 4px;
  border-radius: 3px;
  border-color: var(--oss-ui-line-strong);
  background: rgba(255,255,255,.94);
  box-shadow: 0 3px 10px rgba(31,41,55,.08);
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d svg {
  width: 126px;
  height: 112px;
}

body.mode-atelier .oss-vue-3d-hote .orientation-3d button {
  min-width: 24px;
  min-height: 22px;
  font-size: 11px;
}

body.mode-atelier .oss-vue-3d-hote .message-3d {
  left: 7px;
  top: 7px;
  max-width: calc(100% - 158px);
  padding: 4px 6px;
  border-radius: 2px;
  border-left: 2px solid var(--oss-ui-blue);
  font-size: 10px;
  box-shadow: none;
}

body.mode-atelier .oss-vue-3d-hote .liste-elements-3d {
  left: 7px;
  top: 38px;
  width: min(240px,calc(100% - 14px));
  padding: 5px;
  border: 1px solid var(--oss-ui-line-strong);
  border-top: 2px solid var(--oss-ui-blue);
  border-radius: 2px;
  box-shadow: 0 5px 16px rgba(31,41,55,.10);
  font-size: 10px;
}

body.mode-atelier .oss-vue-3d-hote .liste-elements-3d select {
  height: 104px;
}

body.mode-atelier .oss-vue-3d-hote .fiche-3d {
  left: 7px;
  right: auto;
  bottom: 7px;
  width: 260px;
  max-width: min(260px,calc(100% - 14px));
  max-height: calc(100% - 46px);
  padding: 6px 7px;
  border-radius: 2px;
  border-left: 2px solid var(--oss-ui-blue);
  box-shadow: 0 5px 16px rgba(31,41,55,.10);
}

/* Même interaction bleue qu'en 2D ; rouge/orange/vert restent aux résultats techniques. */
body.mode-atelier .oss-vue-3d-hote .modele-3d button:hover:not(:disabled),
body.mode-atelier .oss-vue-3d-hote .modele-3d button:focus-visible,
body.mode-atelier .oss-vue-3d-hote .modele-3d select:focus,
body.mode-atelier .oss-vue-3d-hote .modele-3d input:focus,
body.mode-atelier .oss-vue-3d-hote .modele-3d button[aria-pressed="true"] {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 7 : NAVIGATEUR COMMUN
   Analyse et Exploitation utilisent désormais le même vocabulaire de navigateur que
   Saisie : Projet / Niveaux / Éléments / Vues / Calques, puis Contrôles métier.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .atelier .at-nav-projet {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-bottom: 1px solid var(--oss-ui-line);
  background: #fff;
}

body.mode-atelier .atelier .at-nav-projet > span:last-child {
  min-width: 0;
}

body.mode-atelier .atelier .at-nav-projet b,
body.mode-atelier .atelier .at-nav-projet small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .atelier .at-nav-projet b {
  color: #26374a;
  font-size: 11px;
}

body.mode-atelier .atelier .at-nav-projet small {
  margin-top: 1px;
  color: var(--oss-ui-muted);
  font-size: 10px;
}

body.mode-atelier .atelier .at-nav-projet-icone {
  color: var(--oss-ui-blue);
  font-size: 12px;
}

body.mode-atelier .atelier .at-nav-section {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--oss-ui-line);
  border-radius: 0;
  background: #fff;
}

body.mode-atelier .atelier .at-nav-section > summary {
  min-height: 32px;
  padding: 6px 14px;
  border: 0;
  background: #fff;
  color: var(--oss-sls-ink);
  font-size: 12px;
  font-weight: 600;
}

body.mode-atelier .atelier .at-nav-section[open] > summary {
  background: #fff;
  color: #334155;
}

body.mode-atelier .atelier .at-nav-corps {
  display: grid;
  gap: 0;
  padding: 0 5px 4px 13px;
}

body.mode-atelier .atelier .at-nav-statut {
  padding: 2px 4px;
  color: #47705a;
  font-size: 10px;
}

body.mode-atelier .atelier .at-nav-famille {
  margin: 0;
  border: 0;
  background: transparent;
}

body.mode-atelier .atelier .at-nav-famille > summary {
  min-height: 23px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 3px 4px;
  border: 0;
  border-radius: 1px;
  background: transparent;
  color: #425166;
  font-size: 10.5px;
}

body.mode-atelier .atelier .at-nav-famille > summary:hover {
  background: #f2f6fb;
}

body.mode-atelier .atelier .at-nav-famille > summary b {
  min-width: 18px;
  color: #7a8796;
  font-size: 10px;
  text-align: right;
}

body.mode-atelier .atelier .at-nav-famille > div {
  padding-left: 8px;
}

body.mode-atelier .atelier .at-nav-element,
body.mode-atelier .atelier .at-nav-vues-corps > button,
body.mode-atelier .atelier .at-nav-calques-resume {
  min-height: 28px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 14px;
  border: 0;
  border-radius: 1px;
  background: transparent;
  color: #425166;
  font-size: 12px;
  text-align: left;
  justify-content: flex-start;
}

body.mode-atelier .atelier .at-nav-element:hover,
body.mode-atelier .atelier .at-nav-vues-corps > button:hover,
body.mode-atelier .atelier .at-nav-calques-resume:hover {
  background: #f2f6fb;
}

/* 465 : l'élément choisi garde le bleu de la sélection (point 405) ; la vue active
   est une commande de navigation, donc rouge SLS comme les autres onglets. */
body.mode-atelier .atelier .at-nav-element.actif {
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
  box-shadow: inset 3px 0 0 var(--oss-ui-blue);
}

body.mode-atelier .atelier .at-nav-vues-corps > button.actif {
  background: var(--oss-sls-red-soft);
  color: var(--oss-sls-red-dark);
  box-shadow: inset 2px 0 0 var(--oss-sls-red);
}

body.mode-atelier .atelier .at-nav-element b {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .atelier .at-nav-calques-resume {
  justify-content: space-between;
}

body.mode-atelier .atelier .at-nav-calques-resume span {
  min-width: 0;
  overflow: hidden;
  color: #697789;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .atelier .at-nav-calques-resume b {
  flex: 0 0 auto;
  color: var(--oss-ui-blue-dark);
  font-size: 10px;
}

body.mode-atelier .atelier .at-nav-controles-corps {
  display: grid;
  gap: 0;
}

body.mode-atelier .atelier .at-nav-controles-corps > .carte,
body.mode-atelier .atelier .at-nav-controles-corps > section {
  margin: 0;
  padding: 6px 7px;
  border: 0;
  border-top: 1px solid #edf0f3;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

/* La vue 3D d'Analyse / Exploitation remplace elle aussi uniquement le centre. */
body.mode-atelier .atelier .at-centre.oss-zone-graphique {
  isolation: isolate;
}

body.mode-atelier .atelier .at-centre.oss-zone-graphique.oss-zone-graphique-3d > :not(.oss-vue-3d-hote) {
  display: none !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 8 : INSPECTEUR COMMUN
   En lecture comme en saisie, la colonne droite est une palette continue :
   identité/propriétés en haut, DDC dessous, sans onglet ni carte flottante.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .atelier .at-inspecteur-titre {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: center;
  gap: 0;
  padding: 10px 16px;
  border-bottom: 1px solid #e3e5e9;
  background: #fff;
}

body.mode-atelier .atelier .at-inspecteur-titre b {
  overflow: hidden;
  color: #1c2430;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .atelier .at-inspecteur-titre small {
  overflow: hidden;
  color: var(--oss-ui-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .atelier .at-inspecteur-section {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--oss-ui-line);
  border-radius: 0;
  background: #fff;
}

body.mode-atelier .atelier .at-inspecteur-section > h3 {
  min-height: 34px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 6px 16px;
  border: 0;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
  color: #1c2430;
  font-size: 13px;
  font-weight: 600;
}

body.mode-atelier .atelier #at-proprietes-resume {
  display: grid;
  background: #fff;
}

body.mode-atelier .atelier .at-prop-resume-ligne {
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(72px,.78fr) minmax(90px,1.22fr);
  align-items: center;
  gap: 6px;
  padding: 4px 16px;
  border-bottom: 1px solid #edf0f3;
  font-size: 12px;
}

body.mode-atelier .atelier .at-prop-resume-ligne:last-child {
  border-bottom: 0;
}

body.mode-atelier .atelier .at-prop-resume-ligne span {
  color: #697789;
}

body.mode-atelier .atelier .at-prop-resume-ligne b {
  min-width: 0;
  overflow: hidden;
  color: #26374a;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .atelier #at-droite-contenu {
  min-width: 0;
  background: #fff;
}

body.mode-atelier .atelier #at-droite-contenu > .carte,
body.mode-atelier .atelier #at-droite-contenu > .at-fiche {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--oss-ui-line);
  border-radius: 0;
  box-shadow: none;
}

body.mode-atelier .atelier .at-inspecteur-ddc:last-child,
body.mode-atelier .atelier #at-droite-contenu > :last-child {
  border-bottom: 0;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 9 : NIVEAU FLOTTANT
   Analyse et Exploitation choisissent le niveau au même endroit que la maquette :
   en bas à droite du viewport, hors du ruban DDC.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .atelier .at-niveau-viewport {
  position: absolute;
  z-index: 24;
  right: 8px;
  bottom: 8px;
  pointer-events: none;
}

body.mode-atelier .atelier .at-niveau-viewport:empty {
  display: none;
}

body.mode-atelier .atelier .at-niveau-viewport label {
  display: block;
  margin: 0;
  pointer-events: auto;
}

body.mode-atelier .atelier .at-niveau-viewport label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.mode-atelier .atelier .at-niveau-viewport select {
  min-width: 118px;
  height: 27px;
  min-height: 27px;
  padding: 3px 23px 3px 7px;
  border: 1px solid var(--oss-ui-line-strong);
  border-radius: 3px;
  background: rgba(255,255,255,.96);
  color: #334155;
  font-size: 10.5px;
  font-weight: 650;
  box-shadow: 0 1px 4px rgba(31,41,55,.08);
}

body.mode-atelier .atelier .at-niveau-viewport select:focus {
  border-color: var(--oss-ui-blue);
  box-shadow: 0 0 0 2px rgba(22,119,232,.10);
  outline: none;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 10 : TIROIR RESULTATS
   Les tableaux restent secondaires. Fermé, le tiroir est une barre basse compacte et
   neutre ; le rouge n'est pas utilisé comme décoration de chrome.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .ossature[data-phase="resultats"] #at-bas.at-tiroir-resultats {
  border: 0;
  border-top: 1px solid var(--oss-ui-line);
  border-left: 0;
  background: #fff;
}

body.mode-atelier .ossature[data-phase="resultats"] .at-tiroir-barre {
  min-height: 28px;
  gap: 4px;
  padding: 2px 6px;
  background: #f7f9fc;
}

body.mode-atelier .ossature[data-phase="resultats"] .at-tiroir-resultats .at-onglets {
  gap: 2px;
}

body.mode-atelier .ossature[data-phase="resultats"] .at-tiroir-resultats .at-onglets button,
body.mode-atelier .ossature[data-phase="resultats"] .at-tiroir-resultats .at-exports button,
body.mode-atelier .ossature[data-phase="resultats"] .at-tiroir-bascule {
  min-height: 22px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10.5px;
}

body.mode-atelier .ossature[data-phase="resultats"] .at-tiroir-resultats .at-onglets .principal {
  border-color: var(--oss-ui-blue-line);
  background: var(--oss-ui-blue-soft);
  color: var(--oss-ui-blue-dark);
}

body.mode-atelier .ossature[data-phase="resultats"] .at-tiroir-contenu {
  height: calc(100% - 29px);
  padding: 6px 8px 12px;
  border-top-color: var(--oss-ui-line);
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 11 : ETATS DDC COMPACTS
   Un blocage ou une péremption ne recrée pas une carte web au-dessus du plan.
   L'état tient sur une ligne ; le détail complet reste dans Contrôles / Inspecteur.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier .atelier .at-ruban-etat {
  min-height: 26px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-bottom: 1px solid var(--oss-ui-line);
  background: #f7f9fc;
  color: #64748b;
  font-size: 10.5px;
}

body.mode-atelier .atelier .at-ruban-etat b {
  color: #334155;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

body.mode-atelier .atelier .at-ruban-etat > span:not(.at-commandes-cadre) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mode-atelier .atelier .at-ruban-etat.alerte {
  border-left: 2px solid #c8871a;
  background: #fffbf2;
}

body.mode-atelier .atelier .at-ruban-etat .at-commandes-cadre {
  justify-self: end;
}

/* ═════════════════════════════════════════════════════════════════════════════
   POINT 405 — PASSE MAQUETTE 12 : PROPRIETES ET DDC EN SAISIE
   Les règles historiques contextuelles masquaient l'une ou l'autre section selon le
   geste. Dans le shell 405, les deux sections restent présentes dans la palette droite.
   Les attributs [hidden] explicites gardent la priorité via leur règle !important.
   ═════════════════════════════════════════════════════════════════════════════ */

body.mode-atelier #oss-inspecteur .oss-section-proprietes,
body.mode-atelier #oss-inspecteur .oss-section-ddc {
  display: block;
}

body.mode-atelier #oss-inspecteur[data-contexte="commande"] .oss-section-proprietes,
body.mode-atelier #oss-inspecteur[data-contexte="commande"] .oss-section-ddc,
body.mode-atelier #oss-inspecteur[data-contexte="selection"] .oss-section-proprietes,
body.mode-atelier #oss-inspecteur[data-contexte="selection"] .oss-section-ddc,
body.mode-atelier #oss-inspecteur[data-contexte="fond"] .oss-section-proprietes,
body.mode-atelier #oss-inspecteur[data-contexte="fond"] .oss-section-ddc {
  display: block;
}

/* POINT 405 - POIGNEES DANS LA ZONE CLIQUABLE DES PALETTES.
   Une palette coupe son debordement : une poignee a -4px n'est pas cliquable
   en son centre. Garder toute la cible dans le panneau, sans changer son chrome. */
body.mode-atelier .oss-poignee-palette { width: 8px; }
body.mode-atelier .oss-poignee-gauche { right: 0; }
body.mode-atelier .oss-poignee-droite { left: 0; }

/* Point 440 : une barre repliee garde ses menus hors du ruban. */
@media (max-width: 980px) {
  
  
  body.mode-atelier .oss-menu-principal > details > div[role="menu"] {
    top: 100%;
    max-width: min(310px, calc(100vw - 24px));
  }
  body.mode-atelier .oss-menu-principal [role="menu"] > button {
    white-space: normal;
  }
}

/* Point 448 - Maquette validee : legende dans la barre, a cote du niveau.
   Le diagnostic et ses couleurs restent produits par le plan. Le repli SVG
   reste visible sans barre (comparaison, lecture ou apercu independant). */
body.mode-atelier .ossature:has(#oss-console .be-diagnostics) .oss-plan-courant [data-diagnostic-legende] {
  display: none;
}
body.mode-atelier #oss-console #zone-vue .barre-etat > span.be-diagnostics {
  color: var(--oss-sls-ink);
}
body.mode-atelier #oss-console .be-diagnostics > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
body.mode-atelier #oss-console .be-diagnostics i {
  display: inline-block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
/* La barre ne doit pas rogner une ligne reportee aux petites largeurs. */