/* meumo - Ecrans Articles et Nomenclatures (lot 8), d'apres les maquettes
 * validees Main (Articles), MainSombre (theme sombre) et Nomenclatures.
 *
 * Charge APRES web/meumo.css : seuls les jetons de couleur de la fondation
 * sont utilises (--fond, --surface, --principal, familles --bleu,
 * --violet...), les deux themes suivent donc tout seuls. Chaque couple texte
 * / fond est l'un de ceux que tests/test_contraste_themes.py verifie (AA).
 *
 * Articles : titre, recherche, « Extraire » (bouton principal) et « Plus »
 * (menu de toutes les autres actions) ; sous-onglets Liste · Nomenclatures ;
 * trois cartes : arborescence (projets et familles avec leurs codes,
 * dossiers, favoris), liste (colonnes reduites, entonnoirs, « + » des
 * colonnes, cadenas violet), fiche a droite (apercu, nom, « reference ·
 * indice », pastilles, actions selon l'etat, puis le detail).
 * Nomenclatures : fil d'Ariane, menu a gauche, composition modifiable sur
 * place (quantite, retrait, ligne « Ajouter un composant »).
 */

/* ============================== Page Articles ============================== */
#view-fichiers.view.active { display: flex; flex-direction: column; gap: 0; }
#view-fichiers .articles-wrap { gap: 14px; padding: 6px 6px 0; }

/* Titre, recherche, Extraire, Plus (maquette Main) */
.art-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: none; position: relative; }
.art-titre { margin: 0 12px 0 0; font-family: var(--police-titre); font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--titre); }
.art-recherche { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 4px;
  background: var(--surface); border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--bordure); }
.art-recherche:focus-within { box-shadow: 0 0 0 2px var(--principal); }
button.art-recherche-loupe { width: 36px; height: 36px; min-height: 36px; padding: 0; border: none; border-radius: var(--rayon-s); background: transparent;
  color: var(--texte-3); display: inline-flex; align-items: center; justify-content: center; flex: none; }
button.art-recherche-loupe:hover { background: var(--surface-2); color: var(--texte); }
.art-recherche-loupe svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-recherche input[type="search"] { flex: 1; min-width: 0; height: 40px; min-height: 0; padding: 0; border: none; border-radius: 0; background: transparent;
  box-shadow: none; outline: none; font-size: 15px; color: var(--texte); }
.art-recherche input[type="search"]:focus, .art-recherche input[type="search"]:hover { box-shadow: none; border: none; }
button.art-extraire, button.art-plus-bouton { height: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px;
  border-radius: var(--rayon); font-size: 15px; font-weight: 700; white-space: nowrap; }
button.art-extraire .mx-ic { width: 18px; height: 18px; vertical-align: 0; }
/* Desactive, avec son info-bulle (aria-disabled : il reste atteignable au
   clavier et au survol, la bulle dit pourquoi). */
button.art-extraire[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
button.art-extraire[aria-disabled="true"]:hover { background: var(--principal); border-color: var(--principal); }
button.art-plus-bouton { padding: 0 16px; background: var(--principal-doux); color: var(--principal-doux-texte); border: 1px solid transparent; letter-spacing: 0; }
button.art-plus-bouton:hover, button.art-plus-bouton[aria-expanded="true"] { background: var(--principal-doux-survol); color: var(--principal-doux-texte); }
button.art-plus-bouton .mx-ic { width: 18px; height: 18px; vertical-align: 0; }
/* Menu « Plus » : carte blanche, icones dans un carre colore (maquette). */
.art-plus .art-plus-liste { width: 290px; top: calc(100% + 8px); padding: 8px; border: none; border-radius: var(--rayon-m); box-shadow: var(--ombre-menu);
  background: var(--surface); z-index: 320; }
.art-plus .art-plus-liste > button { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px; border-radius: var(--rayon-s);
  font-size: 15px; font-weight: 600; color: var(--texte); white-space: normal; line-height: 1.25; }
.art-plus .art-plus-liste > button:hover, .art-plus .art-plus-liste > button:focus-visible { background: var(--fond); }
.art-plus .art-plus-liste > button.mx-avec-pastille > .mx-ic { flex: none; }
.art-plus .art-plus-liste > button:not(.mx-avec-pastille)::before { content: ""; width: 30px; height: 30px; margin-inline-end: 10px; flex: none; }
.art-plus .art-plus-liste .art-plus-sep { display: block; height: 1px; background: var(--ligne); margin: 6px 8px; }

/* Sous-onglets Liste · Nomenclatures (soulignement caramel de 3 px) */
.art-onglets { display: flex; flex-wrap: wrap; gap: 6px; flex: none; margin: -4px 0 0; padding: 0; box-shadow: inset 0 -1px 0 var(--bordure); }
.art-onglets > button { background: transparent; border: none; border-radius: 0; padding: 10px 14px; min-height: 0; color: var(--texte-2);
  font-size: 15px; font-weight: 600; }
.art-onglets > button:hover { background: transparent; color: var(--texte); box-shadow: inset 0 -3px 0 var(--bordure); }
.art-onglets > button.active { color: var(--principal-doux-texte); font-weight: 700; box-shadow: inset 0 -3px 0 var(--principal); }

/* Trois cartes */
#view-fichiers .articles-body { display: flex; align-items: stretch; gap: 7px; flex: 1; min-height: 0; padding-bottom: 6px; }
#view-fichiers .articles-body > .h-sash { flex: 0 0 6px; border-radius: 3px; }
#view-fichiers .articles-body > .h-sash[hidden] { display: none; }

/* ---------- Arborescence ---------- */
.art-arbre.sidebar { flex: 0 0 240px; width: 240px; height: auto; padding: 14px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.art-arbre .sidebar-actions { margin-top: 12px; }
.art-arbre h3, .art-classement h3 { margin: 0; padding: 4px 8px; font-family: var(--police-texte); font-size: 13px; font-weight: 700; color: var(--texte-3); }
.art-classement { display: flex; flex-direction: column; gap: 2px; }
.art-classement-tete { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
.art-classement-tete:first-child { margin-top: 0; }
.art-classement ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.art-noeud { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; padding: 6px 8px; border: none; border-radius: var(--rayon-s);
  background: transparent; color: var(--texte); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; line-height: 1.3; }
.art-noeud:hover { background: var(--fond); }
.art-noeud.actif, .art-noeud[aria-current="true"] { background: var(--principal-doux); color: var(--principal-doux-texte); font-weight: 700; }
.art-noeud .art-noeud-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-noeud .art-noeud-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-noeud .art-noeud-code { flex: none; font-size: 12px; font-weight: 600; color: var(--texte-3); }
.art-noeud.actif .art-noeud-code, .art-noeud[aria-current="true"] .art-noeud-code { color: var(--principal-doux-texte); }
/* Sous-niveaux numerotes (« DRN-01 - Chassis »), en retrait sous leur parent */
.art-noeud.art-sous { padding-left: calc(10px + var(--niveau, 1) * 16px); font-weight: 400; color: var(--texte-2); min-height: 32px; }
.art-noeud.art-sous.actif { color: var(--principal-doux-texte); font-weight: 700; }
.art-noeud-plier { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0 -2px 0 -4px; border: none; border-radius: 6px; background: transparent;
  color: var(--texte-3); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 12px; line-height: 1; }
.art-noeud-plier:hover { background: var(--surface-2); color: var(--texte); }
.art-noeud-plier.vide { visibility: hidden; }
.art-classement-vide { padding: 2px 8px 6px; color: var(--texte-2); font-size: 13px; }
.art-classement .art-ajout { width: 26px; height: 26px; min-height: 0; padding: 0; }

/* ---------- Liste centrale ---------- */
.art-centre.articles-main { flex: 1 1 520px; min-width: 0; padding: 4px 0 0; background: var(--surface); border-radius: var(--rayon-l);
  box-shadow: var(--ombre-carte); display: flex; flex-direction: column; overflow: hidden; }
:root[data-theme="sombre"] .art-centre.articles-main, :root[data-theme="sombre"] .art-fiche { box-shadow: 0 0 0 1px var(--bordure); }
.art-centre .articles-main-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px 6px; flex: none; }
.art-centre #files-title { font-family: var(--police-titre); font-weight: 700; font-size: 16px; color: var(--titre); min-width: 0; flex: 1 1 160px; }
.art-centre #files-title .recherche-limite { display: block; font-family: var(--police-texte); font-weight: 600; font-size: 13px; color: var(--ambre); }
.art-centre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; justify-content: flex-end; }
.art-centre-outils select { min-height: 30px; padding: 2px 8px; font-size: 13px; max-width: 200px; }
.art-centre-outils .mx-compteur { color: var(--texte-2); font-size: 13px; font-weight: 600; padding: 0 4px; }
.art-vue-bascule { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--rayon-s); background: var(--fond); }
.art-vue-bascule button { min-height: 28px; }
.art-centre .selection-articles { margin: 0 16px 6px; padding: 6px 10px; border-radius: var(--rayon-s); background: var(--principal-doux); color: var(--principal-doux-texte); font-weight: 700; }
.art-centre .filter-panel { margin: 0 16px 8px; }
.art-centre .list-area { flex: 1; min-height: 0; overflow: auto; padding: 0 0 8px; }
.art-centre #files-icons { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }
/* Liste : le tableau. Vignettes : la grille. L'ecran vide (zone de depot,
   bouton « Importer mes fichiers ») s'affiche aussi en liste quand elle est vide. */
.art-centre[data-vue="liste"] #files-icons:not(.art-vide-visible) { display: none; }
.art-centre[data-vue="liste"] #files-icons.art-vide-visible { flex: none; display: block; }
.art-centre[data-vue="liste"].art-vide .list-area { flex: none; overflow: visible; }
.art-centre[data-vue="liste"].art-vide #files-empty { display: none; }
/* Liste vide : l'ecran vide prend la place des lignes, juste sous les titres
   du tableau (moins de 40 px, comme tous les tableaux vides, regle de Mon
   espace ; tests/ui/ecrans_vides.js) au lieu d'etre rejete plus bas. */
.art-centre[data-vue="liste"].art-vide .list-area { padding-bottom: 0; }
.art-centre[data-vue="liste"].art-vide #files-icons { padding-top: 0; }
.art-centre[data-vue="liste"].art-vide #files-icons > .articles-vide { padding-top: 16px; }
.art-centre[data-vue="vignettes"] .list-area { display: none; }
#files-table { width: 100%; }
#files-table tbody td.art-ref { font-weight: 700; }
#files-table .art-statut .mx-pastille { font-size: 13px; }
/* Theme sombre (maquette MainSombre) : la pastille brun-gris (Initial)
   prend le ton des traits, pour rester visible sur la ligne choisie. */
:root[data-theme="sombre"] #view-fichiers .mx-pastille.brun { background: var(--bordure); color: var(--brun); }
/* Colonne de reservation : etroite, sans titre visible (maquette : le
   cadenas suffit) ; son nom reste lu par les lecteurs d'ecran et son
   entonnoir filtre les articles reserves. */
#files-table thead tr:first-child th[data-sort="verrouille"] .th-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
#files-table td.art-resa { text-align: left; }
/* Cadenas violet (reserve) ; l'info-bulle dit qui et depuis quand. */
.resa-cadenas { display: inline-flex; align-items: center; justify-content: center; color: var(--violet); vertical-align: middle; cursor: help; }
.resa-cadenas svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.file-card .fc-lock .resa-cadenas svg { width: 14px; height: 14px; }

/* ---------- Fiche a droite ---------- */
.art-fiche { flex: 0 0 380px; width: 380px; min-width: 0; background: var(--surface); border-radius: var(--rayon-l); box-shadow: var(--ombre-carte);
  overflow-y: auto; overflow-x: hidden; }
.art-fiche[hidden] { display: none; }
.art-fiche #detail-view.detail-view { display: block; flex: none; min-height: 0; border: none; border-radius: 0; background: transparent; overflow: visible; }
.art-fiche #detail-view.detail-view.hidden { display: none; }
.art-fiche .detail-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; flex: none; }
.art-fiche .fiche-apercu-zone { flex: none; height: 170px; min-height: 0; padding: 6px; border: none; border-radius: 14px; background: var(--surface-2);
  overflow: hidden; color: var(--texte-3); justify-content: center; }
.art-fiche .fiche-apercu-zone.apercu-agrandi { height: auto; }
/* Modele 3D : le visualiseur (canevas, puis sa barre « Plein écran » /
   « Outils 3D ») tient dans la meme hauteur que les autres apercus, rien
   n'est coupe (la colonne de la fiche garde ses onglets dans l'ecran). */
.art-fiche .fiche-apercu-zone.apercu-3d { height: auto; min-height: 170px; padding: 0; justify-content: flex-start; align-items: stretch; }
.art-fiche .fiche-apercu-zone.apercu-3d .apercu3d-cadre { min-height: 130px; }
.art-fiche .detail-header { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0; flex-wrap: nowrap; }
.fiche-entete { display: flex; align-items: flex-start; gap: 4px; }
.art-fiche .detail-header h2#fiche-title { flex: 1 1 auto; margin: 2px 0 0; font-family: var(--police-titre); font-size: 22px; line-height: 1.25; color: var(--titre); overflow-wrap: anywhere; }
.art-fiche .fiche-favori { flex: none; margin: 0 0 0 -8px; }
.art-fiche .detail-header .fiche-close { position: static; flex: none; width: 34px; height: 34px; min-height: 34px; padding: 0; margin: 0 -8px 0 0; font-size: 18px; border-radius: 50%; }
.fiche-soustitre { margin-top: -8px; color: var(--texte-2); font-size: 14px; font-weight: 600; }
.fiche-soustitre:empty { display: none; }
.fiche-pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fiche-pastilles .mx-pastille { font-size: 13px; padding: 4px 10px; }
.fiche-pastilles .mx-pastille[hidden] { display: none; }
.fiche-pastilles .fiche-reserve.mx-pastille { background: var(--violet-fond); color: var(--violet); border: none; white-space: normal; text-align: left; }
.fiche-pastilles .fiche-reserve svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fiche-pastilles .fiche-provisoire:empty, .fiche-pastilles .mx-presence:empty { display: none; }
.art-fiche .detail-header .fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.art-fiche .detail-header .fiche-actions > button { flex: 1 1 auto; height: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--rayon);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 700; }
.art-fiche .detail-header .fiche-actions > button[hidden], .art-fiche .detail-header .fiche-actions > button.hidden { display: none; }
.art-fiche .detail-header .fiche-actions > button .mx-ic { vertical-align: 0; }
/* Une action, une couleur : Nouvelle version turquoise, Liberer violet,
   Enregistrer caramel doux (maquettes Main et Icones). */
.art-fiche .fiche-actions > button.ghost[data-mx-famille="turquoise"] { background: var(--turquoise-fond); color: var(--turquoise); border-color: transparent; }
.art-fiche .fiche-actions > button.primary[data-mx-famille="turquoise"] { background: var(--turquoise); color: var(--sur-principal); border-color: var(--turquoise); }
.art-fiche .fiche-actions > button.ghost[data-mx-famille="violet"] { background: var(--violet-fond); color: var(--violet); border-color: transparent; }
.art-fiche .fiche-actions > button.ghost[data-mx-famille="doux"] { background: var(--principal-doux); color: var(--principal-doux-texte); border-color: transparent; }
.art-fiche .fiche-actions > button.ghost[data-mx-famille]:hover { filter: brightness(.97); }
.art-fiche .fiche-actions > button.primary[data-mx-famille="turquoise"] > .mx-ic,
.art-fiche .fiche-actions > button.ghost[data-mx-famille] > .mx-ic { color: inherit; }
.art-fiche .fiche-actions .menu-plus { flex: none; }
.art-fiche .fiche-actions .menu-plus-bouton { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--rayon); background: var(--surface);
  border: 1px solid var(--bordure); color: var(--texte); }
/* La fiche defile : son menu ⋯ s'ouvre toujours vers le bas (il ne serait
   pas coupe en haut de la colonne) ; la colonne defile jusqu'a lui. */
.art-fiche .fiche-actions .menu-plus-liste.vers-haut { top: calc(100% + 4px); bottom: auto; }
.art-fiche .fiche-actions .menu-plus-liste { min-width: 250px; border: none; border-radius: var(--rayon-m); box-shadow: var(--ombre-menu); padding: 8px; }
.art-fiche .fiche-actions .menu-plus-liste button { display: flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 600; border-radius: var(--rayon-s); white-space: normal; text-align: left; }
.art-fiche .fiche-actions .menu-plus-liste button:not(.mx-avec-pastille)::before { content: ""; width: 30px; height: 30px; margin-inline-end: 10px; flex: none; }
.art-fiche .fiche-actions .menu-plus-liste button[hidden], .art-fiche .fiche-actions .menu-plus-liste button.hidden { display: none; }
.art-fiche .fiche-chrono { padding: 0; }
.art-fiche .detail-body { padding: 0; overflow: visible; flex: none; display: block; }
.art-fiche .detail-split { display: block; }
.art-fiche .detail-col-gauche { display: flex; flex-direction: column; gap: 10px; overflow: visible; padding: 0; flex: none; }
/* Champs : en lecture, une liste « intitule / valeur » sur deux colonnes
   (maquette : Projet, Famille, Modifie, Valable jusqu'au) ; le detail
   complet revient avec « Modifier la fiche » (menu ⋯). */
.art-fiche #detail-view .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.art-fiche #detail-view .meta-grid label { color: var(--texte-3); font-size: 13.5px; font-weight: 400; gap: 2px; min-width: 0; }
.art-fiche #detail-view:not(.mode-edition) .meta-grid .champ-ro { background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  color: var(--texte) !important; padding: 0 !important; min-height: 0 !important; height: auto; font-size: 14px; font-weight: 600; opacity: 1;
  -webkit-appearance: none; appearance: none; cursor: default; text-overflow: ellipsis; resize: none; }
.art-fiche #detail-view:not(.mode-edition) .meta-grid textarea.champ-ro { field-sizing: content; min-height: 1.4em !important; }
.art-fiche #detail-view:not(.mode-edition) .meta-grid label[data-champ="reference"],
.art-fiche #detail-view:not(.mode-edition) .meta-grid label[data-champ="nom"],
.art-fiche #detail-view:not(.mode-edition) .meta-grid label[data-champ="version"],
.art-fiche #detail-view:not(.mode-edition) .meta-grid label[data-champ="indice"],
.art-fiche #detail-view:not(.mode-edition) .meta-grid label[data-champ="statut_id"] { display: none; }
html.mode-simple .art-fiche #detail-view:not(.mode-edition) .meta-grid label[data-champ="auteur"],
html.mode-simple .art-fiche #detail-view:not(.mode-edition) .meta-grid label[data-champ="taille"],
html.mode-simple .art-fiche #detail-view:not(.mode-edition) .meta-grid label[data-champ="proprietes"] { display: none; }
.art-fiche #detail-view.mode-edition .meta-grid label[data-champ="modifie"] { display: none; }
/* Projet et famille : le chemin en clair en lecture, la liste pour modifier. */
.art-fiche #detail-view:not(.mode-edition) .meta-grid label > select.champ-ro:has(~ .meta-lecture) { display: none; }
.art-fiche #detail-view.mode-edition .meta-grid .meta-lecture { display: none; }
/* Description vide : rien a lire (le champ revient pour modifier). */
.art-fiche #detail-view:not(.mode-edition) .meta-grid label.meta-vide { display: none; }
/* Ordre de lecture (maquette) : Projet, Famille, Modifié, Valable jusqu'au,
   puis l'auteur et la taille (mode Expert), les champs personnalises et la
   description. */
.art-fiche #detail-view .meta-grid label[data-champ="auteur"], .art-fiche #detail-view .meta-grid label[data-champ="taille"] { order: 1; }
.art-fiche #detail-view .meta-grid label[data-champ="meta"], .art-fiche #detail-view .meta-grid label[data-champ="proprietes"],
.art-fiche #detail-view .meta-grid label[data-champ="description"] { order: 2; }
.art-fiche .meta-valeur { color: var(--texte); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.art-fiche .fiche-onglets-sup { margin-top: 4px; }
.art-fiche .fiche-onglets-barre { margin-bottom: 8px; gap: 2px; }
.art-fiche .fiche-onglets-barre > button { padding: 8px 9px; font-size: 13.5px; }
/* Mode Expert, ou modification en cours : rien n'est cache (Simple montre moins). */

/* Elements reserves au mode Expert dans la barre de la liste */
html.mode-simple #view-fichiers .art-expert { display: none !important; }

/* ---------- Ecrans moyens et petits ---------- */
@media (max-width: 1280px) {
  .art-arbre.sidebar { flex-basis: 210px; width: 210px; }
  .art-fiche { flex-basis: 340px; width: 340px; }
}
@media (max-width: 1100px) {
  /* Portable, tablette en paysage : la fiche ouverte reste a droite de la
     liste, dans l'ecran ; l'arborescence lui laisse sa place (la croix ou
     Echap la ramene). */
  #view-fichiers .articles-body.fiche-ouverte > .art-arbre,
  #view-fichiers .articles-body.fiche-ouverte > #sash-v { display: none; }
  .art-fiche { flex: 0 0 340px !important; width: 340px !important; }
  #sash-fiche { display: none; }
}
@media (max-width: 900px) {
  #view-fichiers.view.active { overflow: auto; }
  #view-fichiers .articles-wrap { flex: none; }
  /* Une seule colonne (pas de retour a la ligne : chaque bloc prend la
     largeur de l'ecran, jamais celle de son contenu). */
  #view-fichiers .articles-body { flex-direction: column; flex-wrap: nowrap; flex: none; gap: 12px; }
  #view-fichiers .articles-body > * { min-width: 0; max-width: 100%; }
  #view-fichiers .articles-body > .h-sash { display: none; }
  .art-arbre.sidebar { width: auto !important; flex: none !important; max-height: 38vh; }
  .art-centre.articles-main { flex: none; min-height: 60vh; }
  .art-fiche { flex: none !important; width: auto !important; overflow: visible; }
  /* Fiche ouverte sur un petit ecran : elle prend la place de la liste
     (la croix ou Echap ramene la liste). */
  #view-fichiers .articles-body.fiche-ouverte > .art-arbre, #view-fichiers .articles-body.fiche-ouverte > .art-centre { display: none; }
  .art-titre { font-size: 24px; }
  .art-recherche { flex-basis: 100%; order: 3; }
}

/* ============================== Nomenclatures ============================== */
#view-bom.view.active { gap: 0; }
#view-bom .nomenc-tete { display: flex; flex-direction: column; gap: 12px; flex: none; padding: 6px 6px 0; }
.art-ariane { display: flex; align-items: center; gap: 10px; color: var(--texte-2); font-size: 14px; }
.art-ariane button.lien { color: var(--texte-2); font-size: 14px; padding: 0; min-height: 0; text-decoration: underline; }
.art-ariane button.lien:hover { color: var(--texte); background: transparent; }
.art-ariane .art-ariane-ici { color: var(--texte); font-weight: 700; }
#view-bom .art-onglets { margin: 0; }
.nomenc-corps { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px 6px 16px; }
.nomenc-menu { flex: 1 1 220px; max-width: 250px; display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--surface);
  border-radius: var(--rayon-l); box-shadow: var(--ombre-carte); }
:root[data-theme="sombre"] .nomenc-menu, :root[data-theme="sombre"] .nomenc-contenu { box-shadow: 0 0 0 1px var(--bordure); }
.nomenc-menu-titre { padding: 8px 10px; color: var(--texte-3); font-size: 13px; font-weight: 700; }
button.nomenc-entree { display: block; width: 100%; min-height: 40px; padding: 10px; border: none; border-radius: var(--rayon-s); background: transparent;
  color: var(--texte); font-size: 14.5px; font-weight: 600; text-align: left; }
button.nomenc-entree:hover { background: var(--fond); }
button.nomenc-entree[aria-current="page"] { background: var(--principal-doux); color: var(--principal-doux-texte); font-weight: 700; }
.nomenc-menu button.nomenc-entree > .mx-ic { display: none; }
.nomenc-contenu { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 24px; background: var(--surface);
  border-radius: var(--rayon-l); box-shadow: var(--ombre-carte); }
.nomenc-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.nomenc-identite { display: flex; flex-direction: column; gap: 4px; margin-right: auto; min-width: 0; }
.nomenc-identite h1 { margin: 0; font-family: var(--police-titre); font-size: 26px; line-height: 1.2; color: var(--titre); overflow-wrap: anywhere; }
.nomenc-soustitre { color: var(--texte-2); font-size: 14.5px; }
label.nomenc-assemblage { color: var(--texte-2); font-size: 14.5px; font-weight: 600; }
.nomenc-entete .mx-champ-parcourir { display: inline-flex; gap: 8px; align-items: center; }
.nomenc-entete #bom-ref { height: 40px; width: 170px; }
.nomenc-panneau[hidden] { display: none; }
.nomenc-panneau h3 { margin: 4px 0 6px; font-size: 17px; }
.nomenc-panneau h3:not(:first-child) { margin-top: 18px; }
#view-bom .bom-builder { background: transparent; border: none; box-shadow: none; padding: 0; }
#view-bom .bom-result-scroll { overflow: visible; max-height: none; }
/* Composition : tableau des composants sur tous les niveaux */
/* Le tableau defile dans sa zone sur un petit ecran ; position relative :
   les textes reserves aux lecteurs d'ecran (.sr-only, en position
   absolue) restent dans la zone et n'elargissent pas la page. */
.nomenc-table-zone { overflow-x: auto; position: relative; }
table.nomenc-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
table.nomenc-table th { padding: 10px 8px; text-align: left; color: var(--texte-3); font-size: 13px; font-weight: 700; box-shadow: inset 0 -1px 0 var(--bordure); white-space: nowrap; }
table.nomenc-table td { padding: 8px; box-shadow: inset 0 1px 0 var(--ligne); vertical-align: middle; font-size: 14.5px; }
table.nomenc-table .nomenc-qte { text-align: right; width: 84px; }
table.nomenc-table .nomenc-repere { color: var(--texte-2); width: 90px; }
table.nomenc-table .nomenc-actions { width: 84px; text-align: right; white-space: nowrap; }
table.nomenc-table tr.nomenc-sous-ensemble > td.nomenc-comp { font-weight: 700; }
table.nomenc-table td.nomenc-comp { padding-left: calc(8px + var(--niveau, 0) * 24px); white-space: nowrap; }
table.nomenc-table tr.nomenc-edition { background: var(--selection-ligne); }
.nomenc-plier { width: 22px; height: 22px; min-height: 0; padding: 0; margin-right: 4px; border: none; border-radius: 6px; background: transparent; color: var(--texte-2);
  font-size: 13px; line-height: 1; vertical-align: middle; }
.nomenc-plier:hover { background: var(--surface-2); color: var(--texte); }
.nomenc-plier-vide { display: inline-block; width: 26px; }
input.nomenc-qte-champ { width: 64px; height: 34px; min-height: 0; padding: 0 8px; text-align: right; border-radius: 8px; font-size: 14.5px; }
input.nomenc-qte-champ:focus { box-shadow: 0 0 0 2px var(--principal); border-color: var(--principal); }
button.nomenc-retirer { width: 34px; height: 34px; min-height: 0; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--rouge);
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
button.nomenc-retirer:hover { background: var(--rouge-fond); color: var(--rouge); }
button.nomenc-retirer .mx-ic, button.nomenc-modifier .mx-ic { width: 16px; height: 16px; vertical-align: 0; }
button.nomenc-modifier { width: 34px; height: 34px; min-height: 0; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--brun);
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
button.nomenc-modifier:hover { background: var(--surface-2); }
.nomenc-unite { color: var(--texte-2); font-size: 13px; margin-left: 4px; }
/* Commentaire de la ligne, sous le nom du composant */
.nomenc-commentaire { display: block; margin-top: 2px; color: var(--texte-2); font-size: 13px; overflow-wrap: anywhere; }
.nomenc-achete { color: var(--texte-3); font-size: 13px; }
/* Ligne « Ajouter un composant », a l'endroit ou il apparaitra */
tr.nomenc-ajout > td { padding: 12px 8px; }
.nomenc-ajout-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.nomenc-ajout-form > label { display: flex; flex-direction: column; gap: 4px; color: var(--texte-2); font-size: 13px; font-weight: 600; margin: 0; }
.nomenc-ajout-form > label.nomenc-ajout-ref { flex: 1 1 260px; min-width: 0; }
.nomenc-ajout-form > label.nomenc-ajout-qte { width: 90px; }
.nomenc-ajout-form > label.nomenc-ajout-repere { width: 110px; }
.nomenc-ajout-form input { height: 40px; min-height: 0; }
.nomenc-ajout-form .mx-champ-parcourir { display: flex; gap: 10px; align-items: center; }
.nomenc-ajout-form .mx-champ-parcourir > input { flex: 1; min-width: 0; }
.nomenc-ajout-form button { height: 40px; min-height: 0; }
/* Commentaire a l'ajout : replie (le plus souvent inutile) */
.nomenc-ajout-com { flex: 1 1 100%; color: var(--texte-2); font-size: 13px; font-weight: 600; }
.nomenc-ajout-com > summary { cursor: pointer; width: max-content; padding: 2px 0; }
.nomenc-ajout-com > label { display: block; margin-top: 6px; max-width: 520px; }
.nomenc-ajout-com input { width: 100%; }
.nomenc-astuce { margin: 0; color: var(--texte-2); font-size: 14px; }
.nomenc-niveaux { color: var(--texte-2); font-size: 13.5px; }
.nomenc-vide { color: var(--texte-2); }
.nomenc-comparer-barre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.nomenc-comparer-barre label { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 900px) {
  .nomenc-menu { max-width: none; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; }
  .nomenc-menu-titre { flex-basis: 100%; }
  button.nomenc-entree { width: auto; }
  .nomenc-contenu { padding: 16px; }
}