/* La rubrique Intégrations (assets/js/integrations.js). Les couleurs viennent
   des variables de app.css ; le thème sombre ne redéfinit que celles d'ici. */

:root {
  --in-violet: #6d4bd8; --in-violet-fond: #efeafd;
  --in-bleu: #1f6fd1; --in-bleu-fond: #e5f0fc;
  --in-vert: #2f8a12; --in-vert-fond: #e6f6d6;
  --in-orange: #b45309; --in-orange-fond: #fdf0dc;
  --in-rouge: #b4232f; --in-rouge-fond: #fbe5e7;
  --in-code: #f6f8f3;
}
:root[data-theme="sombre"] {
  --in-violet: #b9a6ff; --in-violet-fond: #2a2350;
  --in-bleu: #8ec1ff; --in-bleu-fond: #16304f;
  --in-vert: #b4f21a; --in-vert-fond: #1d4a1f;
  --in-orange: #f5c27a; --in-orange-fond: #4a3214;
  --in-rouge: #ff9aa4; --in-rouge-fond: #4d1d23;
  --in-code: #0b1810;
}

.in { font-size: 0.875rem; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.in h1, .in h2, .in h3, .in p { margin: 0; }
.in b { font-weight: 600; }
.in code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.8125rem; }

/* L'en-tête de la rubrique et de l'écran MCP */
.in-tete { display: flex; align-items: center; gap: 18px; }
.in-tete h1 { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.in-tete p { margin-top: 6px; color: var(--doux); max-width: 70ch; line-height: 1.5; }
.in-pic { flex: none; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; }
.in-tete--mcp .in-pic { width: 64px; height: 64px; }
.in-pic--violet { color: var(--in-violet); background: var(--in-violet-fond); }
.in-pic--bleu { color: var(--in-bleu); background: var(--in-bleu-fond); }
.in-pic--vert { color: var(--in-vert); background: var(--in-vert-fond); }
.in-pic--orange { color: var(--in-orange); background: var(--in-orange-fond); }
.in-pastille.in-pastille--non_configure { color: var(--doux); background: var(--neutre); }
.in-pastille.in-pastille--attente { color: var(--in-orange); background: var(--in-orange-fond); }
.in-pastille.in-pastille--suspendu { color: var(--in-rouge); background: var(--in-rouge-fond); }
.in-dg-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; }
.in-dg-form label { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.in-dg-form label span { font-weight: 500; }
.in-dg-form input { padding: 9px 12px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--texte); font: inherit; }
.in-dg-etat { padding: 10px 12px; margin-bottom: 12px !important; border-radius: 10px; line-height: 1.5; color: var(--texte); background: var(--pastille); word-break: break-word; }
.in-dg-etat--attente { background: var(--in-orange-fond); }
.in-dg-etat--suspendu { background: var(--in-rouge-fond); }
.in-dg-actes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.in-dg-actes .btn { gap: 6px; text-decoration: none; }
.in-dg-confirme { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.4; }
.in-danger { border-color: var(--in-rouge); color: var(--in-rouge); background: var(--in-rouge-fond); font-weight: 600; }
.in-deroule li > div { grid-column: 2; }

.in-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; color: var(--pastille-texte); background: var(--pastille); white-space: nowrap; }
.in-pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.in-pastille--vif { font-size: 0.75rem; }

/* La grille des intégrations */
.in-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.in-carte { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--texte);
  border: 1px solid transparent; transition: border-color .15s, transform .15s; }
.in-carte:hover { border-color: var(--bord); transform: translateY(-1px); }
.in-carte:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.in-carte-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.in-carte h2 { font-size: 1.0625rem; font-weight: 600; }
.in-carte p { color: var(--doux); line-height: 1.5; flex: 1; }
.in-carte-pied { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-weight: 600; color: var(--vert-fonce); }
:root[data-theme="sombre"] .in-carte-pied { color: var(--citron); }

/* L'écran MCP */
.in-retour { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--doux); text-decoration: none; font-weight: 500; }
.in-retour:hover { color: var(--texte); }
.in-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.in-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.in-section .carte-tete { gap: 12px; margin-bottom: 14px; }
.in-section .carte-tete h2 { font-size: 1.0625rem; }
.in-compte { margin-left: auto; color: var(--doux); font-weight: 500; }
.in-note { color: var(--doux); line-height: 1.5; margin-top: 10px !important; }
.in-sous-titre { font-size: 0.9375rem; font-weight: 600; margin: 18px 0 10px !important; }

.in-code { position: relative; display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px 10px 10px 14px;
  border: 1px solid var(--bord); border-radius: 10px; background: var(--in-code); }
.in-code pre { margin: 0; flex: 1; min-width: 0; overflow-x: auto; white-space: pre; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.8125rem; line-height: 1.55; padding: 2px 0; }
.in-copier { flex: none; padding: 6px 10px; gap: 6px; }

.in-onglets { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; margin-bottom: 14px; border-radius: 10px; background: var(--neutre); }
.in-onglet { flex: 1 1 auto; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--doux);
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.in-onglet:hover { color: var(--texte); }
.in-onglet.is-actif { background: var(--carte); color: var(--texte); box-shadow: var(--ombre); font-weight: 600; }

.in-etapes { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.in-etapes li::marker { color: var(--vert-fonce); font-weight: 600; }

.in-deroule { list-style: none; margin: 0; padding: 0; counter-reset: pas; display: flex; flex-direction: column; gap: 12px; }
.in-deroule li { counter-increment: pas; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 2px; }
.in-deroule li::before { content: counter(pas); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-weight: 600; color: var(--in-violet); background: var(--in-violet-fond); }
.in-deroule span { color: var(--doux); line-height: 1.5; }
.in-deroule .in-telecharger { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.in-telecharger .btn { gap: 6px; text-decoration: none; }

.in-portees { display: flex; flex-direction: column; gap: 8px; }
.in-portee { padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; }
.in-portee > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.in-portee code { color: var(--doux); overflow-wrap: anywhere; }
.in-portee p { margin-top: 4px; color: var(--doux); line-height: 1.5; }

/* Les outils : une liste cherchable qui défile en elle-même */
.in-cherche { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--champ-bord); border-radius: 10px;
  background: var(--champ); color: var(--doux); }
.in-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--texte); font: inherit; }
.in-liste { max-height: 460px; overflow-y: auto; margin-top: 12px; padding-right: 4px; display: flex; flex-direction: column; gap: 14px; }
.in-groupe h3 { position: sticky; top: 0; z-index: 1; padding: 4px 0 6px; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--doux); background: var(--carte); }
.in-groupe h3 small { font-weight: 500; margin-left: 4px; }
.in-outil { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bord); }
.in-outil:first-of-type { border-top: 0; }
.in-outil > div { min-width: 0; }
.in-outil code { color: var(--doux); margin-left: 4px; word-break: break-all; }
.in-outil p { margin-top: 3px; color: var(--doux); line-height: 1.45; }
.in-badge { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 0.71875rem; font-weight: 600; white-space: nowrap; }
.in-badge--lecture { color: var(--in-bleu); background: var(--in-bleu-fond); }
.in-badge--ecriture { color: var(--in-vert); background: var(--in-vert-fond); }
.in-badge--retour { color: var(--in-orange); background: var(--in-orange-fond); }
.in [hidden] { display: none !important; }

.in-prompt { padding: 12px 0; border-top: 1px solid var(--bord); }
.in-prompt:first-of-type { margin-top: 6px; }
.in-prompt code { color: var(--doux); margin-left: 4px; }
.in-prompt p { margin-top: 4px; color: var(--doux); line-height: 1.5; }

.in-note--haut { margin: 0 0 12px !important; }
.in-pic--petit { width: 38px; height: 38px; border-radius: 10px; }
.in-assistants { display: flex; flex-direction: column; }
.in-assistant { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bord); }
.in-assistant:first-child { border-top: 0; padding-top: 0; }
.in-assistant-corps { flex: 1; min-width: 0; }
.in-assistant-corps b { margin-right: 6px; }
.in-assistant-corps p { margin-top: 4px; color: var(--doux); line-height: 1.45; }
.in-assistant-corps code { display: block; margin-top: 2px; color: var(--doux); word-break: break-all; }
.in-assistant-actes { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.in-assistant-actes .btn { gap: 6px; padding: 7px 12px; }
.in-danger { border-color: var(--in-rouge); color: var(--in-rouge); background: var(--in-rouge-fond); font-weight: 600; }
.in-danger:hover { background: var(--in-rouge-fond); filter: brightness(.97); }

.in-garde { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.in-garde li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 3px solid var(--in-violet-fond); }
.in-garde span { color: var(--doux); line-height: 1.5; }

@media (max-width: 1100px) {
  .in-colonnes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .in-tete { flex-direction: column; align-items: flex-start; gap: 12px; }
  .in-pic { width: 48px; height: 48px; }
  .in-grille { grid-template-columns: minmax(0, 1fr); }
  .in-onglet { flex: 1 1 45%; }
  .in-copier span { display: none; }
  .in-code pre { white-space: pre-wrap; word-break: break-all; }
  .in-outil { flex-direction: column; gap: 6px; }
  .in-assistant { flex-wrap: wrap; }
  .in-assistant-actes { width: 100%; justify-content: flex-start; }
  .in-liste { max-height: 380px; }
}

/* ODESA : états d'une clé ou d'une place */
.in-pastille.in-pastille--active { color: var(--in-vert, #1a8a4a); background: var(--in-vert-fond, rgba(26,138,74,.12)); }
.in-pastille.in-pastille--suspendue, .in-pastille.in-pastille--echue, .in-pastille.in-pastille--revoquee { color: var(--in-rouge); background: var(--in-rouge-fond); }
.in-pastille.in-pastille--emise { color: var(--in-orange); background: var(--in-orange-fond); }

/* Mon PC : bandeau de Mon coffre (coffre.css) puis les onglets des fonctionnalites */
.mp { --cf-vert: #2f9a1c; font-size: 0.9375rem; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mp h1, .mp h2, .mp p { margin: 0; }
.mp-tete h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.mp-tete h1 .in-pastille { font-size: 0.8125rem; letter-spacing: 0; }
.mp-tete .cf-tete-texte { max-width: 72%; }
.mp-tete .cf-meta { gap: 8px 26px; }
.mp-corps { display: flex; flex-direction: column; padding-top: 6px; }
.mp-onglets { flex: none; gap: 24px; border-bottom: 1px solid var(--bord); overflow-x: auto; scrollbar-width: none; }
.mp-onglets .cf-onglet { flex: none; }
.mp-onglets .cf-onglet[hidden] { display: none; }
/* « Plus » : les onglets qui ne tiennent pas sur la ligne (odesa.js, ajusterOnglets). */
.mp-plus-ancre { flex: none; display: inline-flex; align-self: stretch; }
.mp-onglets .mp-plus { gap: 6px; }
.mp-plus-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  color: var(--doux); background: var(--fond, #f1f5f1); }
.mp-plus[aria-expanded="true"] { color: var(--texte); }
.mp-plus-menu { position: fixed; z-index: 950; min-width: 240px; max-width: 260px; padding: 6px; border: 1px solid var(--bord); border-radius: 12px;
  background: var(--carte); box-shadow: 0 16px 40px rgba(15, 23, 42, .16); }
.mp-plus-menu[hidden] { display: none; }
.mp-plus-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--texte); font: inherit; font-weight: 600; text-align: left; cursor: pointer; white-space: nowrap; }
.mp-plus-item:hover, .mp-plus-item:focus-visible { background: var(--fond, #f1f5f1); outline: none; }
.mp-plus-item > svg { flex: none; color: var(--doux); }
.mp-onglets .cf-onglet:first-child { display: inline-flex; overflow: visible; }
/* La rangée d'onglets et, au bout, le bouton qui agrandit l'espace à toute la fenêtre. */
.mp-onglets-ligne { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--bord); min-width: 0; }
/* Plus précis que « .mp .cf-onglets { flex: none } » plus bas : sur la ligne, la barre rétrécit (le surplus va dans « Plus »). */
.mp .mp-onglets-ligne .mp-onglets { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.mp-max { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--doux); cursor: pointer; }
.mp-max:hover { color: var(--texte); border-color: var(--champ-bord, var(--bord)); }
.mp-max:focus-visible { outline: 2px solid var(--vert, #2f9a1c); outline-offset: 2px; }
.mp-corps.is-max { position: fixed; inset: 10px; z-index: 900; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(15, 23, 42, .28); }
.mp-corps.is-max > .mp-ix, .mp-corps.is-max > .mp-vide { flex: 1 1 auto; min-height: 0; overflow: auto; }
.mp-corps.is-max .dn, .mp-corps.is-max .mo, .mp-corps.is-max .mp-ix-grille, .mp-corps.is-max .oa-defile { height: calc(100vh - 190px); }
.mp-corps.is-max .oa, .mp-corps.is-max .ma { flex: 1 1 auto; min-height: 0; }
body.mp-max-ouvert { overflow: hidden; }
.mp-vide { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 580px; margin: 0 auto; padding: 56px 16px 40px; text-align: center; color: var(--doux); }
.mp-vide .in-pic { width: 64px; height: 64px; border-radius: 16px; }
.mp-vide h2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; color: var(--texte); font-size: 1.25rem; }
/* Mon PC > Mes fichiers : la recherche dans les documents indexes du PC */
.mp-ix { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; min-height: 0; }
.mp-ix-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mp-ix-champ { flex: 1 1 320px; }
.mp-ix-champ input::-webkit-search-cancel-button { cursor: pointer; }
.mp-ix-lim { display: inline-flex; align-items: center; gap: 8px; color: var(--doux); }
.mp-ix-lim select { height: 42px; padding: 0 10px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--texte); font: inherit; }
.mp-ix-barre .btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; }
.mp-ix-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--doux); font-size: 0.875rem; }
.mp-ix-etat i { font-style: normal; }
.mp-ix-etat--ko, .mp-ix-vide--ko { color: var(--in-rouge) !important; }
.mp-ix-grille { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; height: clamp(360px, calc(100vh - 440px), 900px); min-height: 0; }
.mp-ix-res, .mp-ix-ext { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; border: 1px solid var(--bord); border-radius: 12px; }
.mp-ix-res { display: flex; flex-direction: column; }
.mp-ix-vide { margin: auto !important; max-width: 440px; padding: 24px; text-align: center; color: var(--doux); }
.mp-ix-n { padding: 12px 14px 4px; color: var(--doux); font-size: 0.8125rem; }
.mp-ix-tete, .mp-ix-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 140px; align-items: center; gap: 16px; padding: 9px 14px; }
.mp-ix-tete { position: sticky; top: 0; z-index: 1; background: var(--carte); border-bottom: 1px solid var(--bord); color: var(--doux); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mp-ix-ligne { width: 100%; border: 0; border-bottom: 1px solid var(--bord); background: transparent; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.mp-ix-ligne:hover { background: var(--neutre); }
.mp-ix-ligne.is-actif { background: var(--in-vert-fond); }
.mp-ix-nom { display: flex; flex-direction: column; min-width: 0; }
.mp-ix-nom b, .mp-ix-nom small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ix-nom b { font-weight: 600; }
.mp-ix-nom small { color: var(--doux); font-size: 0.75rem; }
.mp-ix-score { display: block; height: 8px; border-radius: 99px; background: var(--neutre); overflow: hidden; }
.mp-ix-score i { display: block; height: 100%; border-radius: 99px; background: var(--cf-vert); }
.mp-ix-ext { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.mp-ix-ext-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mp-ix-ext-tete h3 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.mp-ix-ext-tete .btn { flex: none; }
.mp-ix-snippet { line-height: 1.6; }
.mp-ix-snippet mark { padding: 0 2px; border-radius: 3px; background: #fff1a8; color: inherit; }
:root[data-theme="sombre"] .mp-ix-snippet mark { background: #5c4f12; }
.mp-ix-doc { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 0.875rem; line-height: 1.55; }
@media (max-width: 900px) {
  .mp-ix-grille { grid-template-columns: minmax(0, 1fr); height: auto; }
  .mp-ix-barre .mp-ix-champ { order: 0; flex: 1 1 100%; min-width: 0; }
  .mp-ix-res, .mp-ix-ext { max-height: 60vh; }
  .mp-ix-tete, .mp-ix-ligne { grid-template-columns: minmax(0, 1fr) 72px; }
}
/* Mon PC sans défilement de page : en-tête fixe, la carte prend la hauteur restante,
   la zone des Apps (ou les résultats de Mes fichiers) défile en elle-même. */
.mp > .zone { display: flex; flex-direction: column; gap: 20px; }
.mp > .zone > * { margin: 0 !important; }
/* coffre.css (chargé après) donne flex: 1 à .cf-onglets : ici les barres d'onglets gardent leur hauteur. */
.mp .cf-onglets { flex: none; }
@media (min-width: 1000px) and (min-height: 620px) {
  .mp.cadre > .zone { overflow: hidden; }
  .mp.cadre > .zone > * { flex: none; }
  .mp.cadre > .zone > .mp-corps { flex: 1 1 0; min-height: 320px; }
  .mp.cadre .mp-corps > .mp-ix { flex: 1 1 0; min-height: 0; }
  .mp.cadre .mp-ix > .oa { flex: 1 1 0; }
  .mp.cadre .oa > .oa-defile, .mp.cadre .mp-ix > .mp-ix-grille { flex: 1 1 0; height: auto; min-height: 0; }
  /* Fonctions et Activité : en-tête, filtres et pagination fixes ; le tableau défile (titres collés en haut). */
  .mp.cadre .oa-corps--table { overflow: hidden; }
  .mp.cadre .oa-corps--table > .oa-table { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
  /* Initialisation : les étapes défilent sous le parcours. Vue d'ensemble : les lignes
     d'identité (et les tuiles si elles débordent) ; titre, description et aide restent. */
  .mp.cadre .oa-corps--table > .oa-etapes { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
  .mp.cadre .oa-corps--table > .oa-apercu { flex: 0 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .mp.cadre .oa-apercu > .oa-bloc { display: flex; flex-direction: column; min-height: 0; }
  .mp.cadre .oa-apercu > .oa-bloc > * { flex: none; }
  .mp.cadre .oa-apercu > .oa-bloc > .oa-dl { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
  .mp.cadre .oa-apercu > .oa-tuiles { min-height: 0; overflow-y: auto; align-content: start; }
  .mp.cadre .oa-corps--table > .oa-act { flex: 0 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .mp.cadre .oa-corps--table .oa-act-liste { min-height: 0; }
  .mp.cadre .oa-corps--table .oa-act-liste > .oa-table { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
  .mp.cadre .oa-corps--table .oa-act-liste > .oa-pages { flex: none; }
  .mp.cadre .oa-corps--table .oa-detail { position: static; min-height: 0; overflow-y: auto; }
  .mp.cadre .oa-corps--table .oa-detail > * { flex: none; }
  .mp.cadre .oa-corps--table .oa-detail > .oa-detail-corps { flex: 1 1 0; min-height: 160px; max-height: none; overflow: auto; }
}
/* Mon PC > Mes applications (odesa-apps.js) : liste des Apps puis fiche a onglets */
.oa { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.oa .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.oa-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.oa-tete h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 1.25rem; }
.oa-tete p { margin-top: 4px !important; color: var(--doux); font-size: 0.875rem; }
.oa-actes, .oa-fiche-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.oa-note { padding: 10px 14px; border-radius: 10px; background: var(--in-orange-fond); color: var(--in-orange); font-size: 0.8125rem; }
.oa-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.oa-champ { flex: 1 1 300px; }
.oa-defile { height: clamp(380px, calc(100vh - 470px), 900px); min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.oa-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 2px 2px 8px; }
.oa-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; border: 1px solid var(--bord); border-left: 4px solid var(--in-vert);
  border-radius: 12px; background: var(--carte); color: var(--texte); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.oa-carte:hover { box-shadow: var(--ombre); transform: translateY(-1px); }
.oa-carte[hidden] { display: none; }
.oa-carte--orange { border-left-color: var(--in-orange); }
.oa-carte--rouge { border-left-color: var(--in-rouge); }
.oa-carte-tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.oa-carte-tete > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.oa-carte-tete b { font-size: 1.0625rem; font-weight: 600; }
.oa-carte-tete small { color: var(--doux); font-size: 0.8125rem; }
.oa-carte .in-pic { width: 48px; height: 48px; border-radius: 12px; }
.oa-carte-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--doux); font-size: 0.875rem; line-height: 1.5; }
.oa-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; font-style: normal; white-space: nowrap; }
.oa-pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.oa-pastille--vert { color: var(--in-vert); background: var(--in-vert-fond); }
.oa-pastille--orange { color: var(--in-orange); background: var(--in-orange-fond); }
.oa-pastille--rouge { color: var(--in-rouge); background: var(--in-rouge-fond); }
.oa-pastille--bleu { color: var(--in-bleu); background: var(--in-bleu-fond); }
.oa-pastille--gris { color: var(--doux); background: rgba(127,127,127,.14); }
.oa-carte-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.oa-vide { padding: 40px 16px; text-align: center; color: var(--doux); }
.oa-danger { border-color: var(--in-rouge) !important; color: var(--in-rouge) !important; }
.oa-danger:hover { background: var(--in-rouge-fond) !important; }
.oa-succes { border: 0 !important; background: linear-gradient(180deg, #5cc71f, #3da315) !important; color: #fff !important; font-weight: 600; }
.oa-onglets { margin-top: -2px; }
.oa-corps { display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.oa-apercu { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.oa-bloc, .oa-etape { padding: 16px 18px; border: 1px solid var(--bord); border-radius: 12px; }
.oa-etapes { display: flex; flex-direction: column; gap: 14px; }
.oa-etapes:empty { display: none; }
.oa-bloc h3, .oa-etape h3, .oa-instr-tete h3 { margin: 0 0 10px; font-size: 1rem; }
.oa-desc { margin-bottom: 12px !important; font-weight: 600; line-height: 1.5; }
.oa-dl { display: grid; gap: 8px; margin: 0; }
.oa-dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.oa-dl dt { color: var(--doux); }
.oa-dl dd { margin: 0; font-weight: 500; }
.oa-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oa-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--neutre); }
.oa-kpi b { font-size: 1.5rem; font-weight: 700; }
.oa-kpi span { font-weight: 600; }
.oa-kpi small { color: var(--doux); font-size: 0.75rem; }
.oa-sur { color: var(--doux); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.oa-etape { display: flex; flex-direction: column; gap: 10px; }
.oa-etape h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.oa-etape h3 span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--in-vert-fond); color: var(--in-vert); font-size: 0.8125rem; }
.oa-etape--danger { border-color: rgba(200, 40, 40, .35); }
.oa-etape--danger h3 span { background: var(--in-rouge-fond); color: var(--in-rouge); }
.oa-msg { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; line-height: 1.5; }
.oa-msg svg { flex: none; margin-top: 1px; }
.oa-msg--ok { color: var(--in-vert); }
.oa-msg--doux { color: var(--doux); }
.oa-msg--danger { color: var(--in-rouge); }
.oa-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--doux); font-size: 0.875rem; }
.oa-ligne--fin { justify-content: space-between; color: var(--texte); padding: 6px 0; border-top: 1px solid var(--bord); }
.oa-ligne--fin > span { flex: 1 1 280px; }
.oa-table { border: 1px solid var(--bord); border-radius: 12px; }
.oa-tr { display: grid; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--bord); background: transparent;
  color: var(--texte); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
.oa-tr[hidden] { display: none; }
.oa-tr:last-child { border-bottom: 0; }
button.oa-tr:hover { background: var(--neutre); }
.oa-tr.is-actif { background: var(--in-vert-fond); }
.oa-th { position: sticky; top: 0; z-index: 1; background: var(--carte); color: var(--doux); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; cursor: default; border-radius: 12px 12px 0 0; }
.oa-tr > span, .oa-tr > code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-tr code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.8125rem; }
.oa-doux { color: var(--doux); }
.oa-type { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; font-style: normal; }
.oa-type--lecture { color: var(--in-vert); background: var(--in-vert-fond); }
.oa-type--ecriture { color: var(--in-orange); background: var(--in-orange-fond); }
.oa-res-court { color: var(--doux); }
.oa-res { grid-column: 4; margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.75rem; line-height: 1.5; }
.oa-url { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.oa-url > span { font-weight: 600; font-size: 0.875rem; }
.oa-url input { flex: 1 1 320px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ-lecture, var(--neutre)); color: var(--texte); font: inherit; font-size: 0.875rem; }
.oa-instr-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oa-instr-tete h3 { margin: 0; }
.oa-instr { flex: none; max-height: 420px; margin: 0; padding: 14px 16px; overflow-y: auto; border: 1px solid var(--bord); border-radius: 12px; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 0.875rem; line-height: 1.55; }
.oa-modale { width: min(620px, 100%); }
.oa-coche { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.oa-coche input { width: 18px; height: 18px; accent-color: var(--in-rouge); }
.oa-res--modale { max-height: 260px; overflow: auto; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--neutre); }
.oa-barre--fin { justify-content: space-between; }
.oa-form { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; overflow-y: auto; }
.oa-champ-form { display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; font-weight: 600; }
.oa-champ-form input { height: 40px; padding: 0 12px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--texte); font: inherit; font-weight: 400; }
@media (max-width: 900px) {
  .oa-defile { height: auto; max-height: none; overflow: visible; }
  .oa-apercu { grid-template-columns: minmax(0, 1fr); }
  .oa-res { grid-column: 1 / -1; }
  .oa-dl > div { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mp-tete .cf-tete-texte { max-width: none; }
  .mp-tete .cf-meta > span { display: block; }
  .mp-tete .cf-meta > span > svg { display: inline-block; margin-right: 8px; vertical-align: -3px; }
  .mp-onglets .cf-onglet > svg { display: none; }
  .mp-onglets { gap: 16px; }
  .mp-vide { padding: 36px 4px 24px; }
}

/* ODESA sur le serveur d'une société : le mauve (Mon SERVER, le choix, la
   page de la société). */
:root { --in-mauve: #7a3fe0; --in-mauve-fond: #f1eafd; }
:root[data-theme="sombre"] { --in-mauve: #c6a8ff; --in-mauve-fond: #2c2150; }
.in-pic--mauve { color: var(--in-mauve); background: var(--in-mauve-fond); }
.mp--srv { --cf-vert: var(--in-mauve); }
.mp-tete--srv { background: linear-gradient(100deg, #f7f2fe 0%, #efe5fd 55%, #e4d6fb 100%); }
:root[data-theme="sombre"] .mp-tete--srv { background: linear-gradient(100deg, #1c1631 0%, #241b45 60%, #2d2058 100%); }
.mp-tete--srv .cf-pic { background: linear-gradient(160deg, #a274f5 0%, #5a28bf 100%); box-shadow: 0 10px 24px rgba(90, 40, 191, .28); }
.mp-tete--srv .cf-illu { filter: hue-rotate(160deg) saturate(.9); }
.mp-tete .cf-meta a { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 600; text-decoration: none; }
.mp-tete .cf-meta a:hover { color: var(--in-mauve); }

.od-choix { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.od-choix-tete h1 { margin: 0; font-size: 1.75rem; font-weight: 700; }
.od-choix-tete p { margin: 6px 0 0; color: var(--doux); }
.od-choix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.od-choix-carte { display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px 16px; align-items: start; padding: 22px; color: inherit; text-decoration: none;
  border-top: 4px solid var(--in-vert); transition: transform .15s ease, box-shadow .15s ease; }
.od-choix-carte--srv { border-top-color: var(--in-mauve); }
.od-choix-carte:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .08); }
.od-choix-pic { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; color: #fff; background: linear-gradient(160deg, #4fbf22 0%, #237f14 100%); }
.od-choix-carte--srv .od-choix-pic { background: linear-gradient(160deg, #a274f5 0%, #5a28bf 100%); }
.od-choix-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.od-choix-corps b { font-size: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-choix-corps small { color: var(--doux); font-size: 0.875rem; }
.od-choix-ligne { font-size: 0.8125rem; color: var(--doux); }
/* The badges and the button share the bottom row: the badges never widen the icon column. */
.od-choix-carte > .in-pastille, .od-choix-carte > .od-dev-badges { grid-column: 1 / -1; grid-row: 2; justify-self: start; align-self: center; max-width: calc(100% - 110px); }
.od-choix-carte > .btn { grid-column: 1 / -1; grid-row: 2; justify-self: end; align-self: center; }

.od-sv { display: flex; flex-direction: column; gap: 18px; min-width: 0; font-size: 0.875rem; }
.od-sv h2, .od-sv h3, .od-sv p { margin: 0; }
.od-sv h3 { margin-top: 16px; font-size: 0.9375rem; font-weight: 600; }
.od-sv-tete { flex-wrap: wrap; gap: 12px; }
.od-sv-tete > .btn { margin-left: auto; }
.od-sv-crayon { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--doux); cursor: pointer; }
.od-sv-crayon:hover { color: var(--in-mauve); background: var(--in-mauve-fond); }
.od-sv-nom { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; }
.od-sv-nom input { flex: 1 1 200px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--texte); font: inherit; }
.od-sv-armer { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; }
.od-sv-arme { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--in-mauve-fond); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.od-sv-arme b { display: inline-flex; align-items: center; gap: 8px; color: var(--in-mauve); }
.od-sv-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bord); }
.od-sv-conf { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.od-sv-activer { margin-top: 14px; }
.od-sv-activer summary { cursor: pointer; color: var(--doux); font-weight: 500; }
@media (max-width: 700px) {
  .od-choix-tete h1 { font-size: 1.375rem; }
  .od-sv-tete > .btn { margin-left: 0; }
}

/* Mes applications, d'après les maquettes du 2026-10-08 : en-tête de l'App,
   tuiles, parcours de mise en service, tableaux paginés, détail JSON. */
.oa-tete--app .oa-fiche-titre { gap: 12px 18px; }
.oa-app-pic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #d58a52, #8a4a1c); box-shadow: 0 4px 12px rgba(138, 74, 28, .3); }
.oa-mini { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--doux); cursor: pointer; }
.oa-mini:hover { color: var(--texte); background: var(--neutre); }
.oa-mini--cadre { border: 1px solid var(--bord); background: var(--carte); }
.oa-etiquette { display: inline-block; padding: 2px 10px; border-radius: 8px; color: var(--in-bleu); background: var(--in-bleu-fond); font-size: 0.8125rem; font-weight: 600; }
.oa-dl dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oa-dl > div { padding-bottom: 8px; border-bottom: 1px solid var(--bord); }
.oa-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.oa-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oa-tuile { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--bord); border-radius: 14px; background: var(--carte); color: inherit; text-align: left; font: inherit; }
button.oa-tuile { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
button.oa-tuile:hover { box-shadow: var(--ombre); transform: translateY(-1px); }
.oa-tuile > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.oa-tuile b { font-size: 1.625rem; font-weight: 700; line-height: 1.1; }
.oa-tuile small { color: var(--doux); font-size: 0.75rem; }
.oa-tuile > svg { color: var(--in-vert); }
.oa-tuile-pic { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 12px; }
.oa-tuile-pic--vert { color: var(--in-vert); background: var(--in-vert-fond); }
.oa-tuile-pic--mauve { color: var(--in-mauve); background: var(--in-mauve-fond); }
.oa-tuile-pic--bleu { color: var(--in-bleu); background: var(--in-bleu-fond); }
.oa-tuile-pic--orange { color: var(--in-orange); background: var(--in-orange-fond); }
.oa-aide { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 18px; border-radius: 12px; background: var(--in-bleu-fond); font-size: 0.875rem; line-height: 1.5; }
.oa-aide > svg { flex: none; color: var(--in-orange); }

.oa-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.oa-entete > div:nth-child(2) { flex: 1 1 280px; min-width: 0; }
.oa-entete h3 { margin: 0; font-size: 1.125rem; }
.oa-entete p { margin: 2px 0 0 !important; color: var(--doux); font-size: 0.875rem; }
.oa-entete-pic { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; color: var(--in-vert); background: var(--in-vert-fond); }
.oa-progres { display: grid; grid-template-columns: minmax(140px, 220px) auto; align-items: center; gap: 4px 10px; }
.oa-progres > span { height: 8px; border-radius: 99px; background: var(--neutre); overflow: hidden; }
.oa-progres i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5cc71f, #3da315); }
.oa-progres small { grid-column: 1 / -1; color: var(--doux); font-size: 0.75rem; }
.oa-etape { padding: 0; overflow: hidden; gap: 0; }
.oa-corps > * { flex: none; }
.oa-etape-tete { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.oa-etape-tete > div { flex: 1; min-width: 0; }
.oa-etape-tete h3 { margin: 0; font-size: 1rem; }
.oa-etape-tete p { margin: 2px 0 0 !important; color: var(--doux); font-size: 0.8125rem; }
.oa-num { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--in-vert-fond); color: var(--in-vert); font-weight: 700; }
.oa-etape--danger { background: color-mix(in srgb, var(--in-rouge-fond) 45%, transparent); }
.oa-etape--danger .oa-num { background: var(--in-rouge-fond); color: var(--in-rouge); }
.oa-etape--danger .oa-etape-tete p { color: var(--in-rouge); }
.oa-etape-corps { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.oa-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.oa-badge--ok { color: var(--in-vert); background: var(--in-vert-fond); }
.oa-badge--bleu { color: var(--in-bleu); background: var(--in-bleu-fond); }
.oa-badge--danger { color: var(--in-rouge); background: var(--in-rouge-fond); }
.oa-rangee { display: grid; grid-template-columns: 36px minmax(140px, 220px) minmax(0, 1fr) auto auto; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); font-size: 0.875rem; }
.oa-rangee > span:nth-child(3) { color: var(--doux); }
.oa-rangee--ok { background: var(--in-vert-fond); border-color: transparent; }
.oa-rangee-pic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--doux); }
.oa-rangee--ok .oa-rangee-pic { color: #fff; background: var(--in-vert); }
.oa-quand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.oa-quand small { color: var(--doux); font-size: 0.75rem; }
.oa-rangee > .btn { grid-column: 5; }

.oa-mini-tuiles { display: flex; gap: 10px; }
.oa-mini-tuiles span { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 10px; background: var(--neutre); color: var(--doux); font-size: 0.75rem; }
.oa-mini-tuiles b { color: var(--texte); font-size: 1.25rem; }
.oa-select { height: 40px; padding: 0 10px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--texte); font: inherit; font-size: 0.875rem; }
.oa-table--fn .oa-tr { grid-template-columns: minmax(180px, 1.3fr) minmax(0, 2fr) 120px 150px 60px; cursor: default; }
.oa-table--fn .oa-tr:not(.oa-th):hover { background: var(--neutre); }
.oa-fn { display: flex !important; align-items: center; gap: 10px; }
.oa-fn code { overflow: hidden; text-overflow: ellipsis; }
.oa-fn-pic { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; }
.oa-fn-pic--lecture { color: var(--in-vert); background: var(--in-vert-fond); }
.oa-fn-pic--ecriture { color: var(--in-orange); background: var(--in-orange-fond); }
.oa-tr .oa-doux svg { vertical-align: -2px; }
.oa-actions { display: flex; justify-content: flex-end; }
.oa-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--doux); font-size: 0.8125rem; }
.oa-pages-num { display: flex; gap: 6px; }
.oa-page { min-width: 34px; height: 34px; padding: 0 8px; display: inline-grid; place-items: center; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; }
.oa-page.is-actif { border-color: transparent; color: #fff; background: var(--in-vert); }
.oa-page:disabled { opacity: .4; cursor: default; }

.oa-act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.oa-act--detail { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
.oa-act-liste { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.oa-table--act .oa-tr { grid-template-columns: 130px minmax(140px, 1fr) 96px 70px minmax(0, 1.2fr) 18px; align-items: center; }
.oa-act--detail .oa-table--act .oa-tr { grid-template-columns: 120px minmax(130px, 1fr) 90px 64px 18px; }
.oa-act--detail .oa-table--act .oa-tr > :nth-child(5) { display: none; }
.oa-table--act .oa-tr.is-actif { box-shadow: inset 3px 0 0 var(--in-vert); }
.oa-op { display: flex !important; flex-direction: column; min-width: 0; }
.oa-op code, .oa-op small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-op small { color: var(--doux); font-size: 0.75rem; }
.oa-detail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--bord); border-radius: 14px; background: var(--carte); min-width: 0; }
.oa-detail-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oa-detail-tete h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; }
.oa-detail-op { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--neutre); }
.oa-detail-op > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oa-detail-op code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.oa-detail-op small { color: var(--doux); font-size: 0.75rem; }
.oa-detail-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.oa-bascule { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--neutre); }
.oa-bascule button { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--doux); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.oa-bascule button.is-actif { color: #fff; background: var(--in-vert); }
.oa-detail-cherche { flex: none; }
.oa-detail-corps { max-height: 52vh; overflow: auto; }
.oa-json { margin: 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.8125rem; line-height: 1.6; }
.oa-json--texte { white-space: pre-wrap; word-break: break-word; }
.oa-json mark { padding: 0 1px; border-radius: 3px; background: #fde68a; color: inherit; }
.oa-j-noeud > summary { cursor: pointer; list-style: none; }
.oa-j-noeud > summary::-webkit-details-marker { display: none; }
.oa-j-noeud > summary::before { content: "\25B8"; display: inline-block; width: 14px; color: var(--doux); transition: transform .12s ease; }
.oa-j-noeud[open] > summary::before { transform: rotate(90deg); }
.oa-j-enfants { padding-left: 18px; border-left: 1px dashed var(--bord); margin-left: 5px; }
.oa-j-feuille { padding-left: 14px; word-break: break-word; }
.oa-j-cle { color: var(--in-bleu); }
.oa-j-type { color: var(--doux); }
.oa-j-texte { color: #b4232f; }
.oa-j-nombre { color: var(--in-mauve); }
.oa-j-bool, .oa-j-nul { color: var(--in-orange); }
:root[data-theme="sombre"] .oa-j-texte { color: #ff9aa4; }
@media (max-width: 1100px) {
  .oa-act--detail { grid-template-columns: minmax(0, 1fr); }
  .oa-detail { position: static; }
}
@media (max-width: 900px) {
  .oa-tuiles { grid-template-columns: minmax(0, 1fr); }
  .oa-rangee { grid-template-columns: 36px minmax(0, 1fr); }
  .oa-rangee > span:nth-child(3) { grid-column: 2; }
  .oa-rangee > .btn, .oa-rangee > .oa-quand { grid-column: 2; justify-self: start; }
  .oa-table--fn .oa-tr { grid-template-columns: minmax(0, 1fr) 100px 50px; }
  .oa-table--fn .oa-tr > :nth-child(2), .oa-table--fn .oa-tr > :nth-child(4) { display: none; }
  .oa-table--act .oa-tr, .oa-act--detail .oa-table--act .oa-tr { grid-template-columns: minmax(0, 1fr) 90px 18px; }
  .oa-table--act .oa-tr > :nth-child(1), .oa-table--act .oa-tr > :nth-child(4), .oa-table--act .oa-tr > :nth-child(5) { display: none; }
}
.oa-barre .oa-select { flex: 0 0 auto; width: auto; min-width: 170px; }
.oa-barre .oa-champ { flex: 1 1 260px; width: auto; min-width: 0; }
.oa-tr > .oa-doux { display: flex; align-items: center; gap: 6px; }
.oa-tuiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.oa-apercu { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.od-sv-guide { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 0.875rem; line-height: 1.5; }
/* ODESA sur les serveurs d'une société : un onglet par serveur ; dans l'onglet, Serveur et
   Accès côte à côte, les applications dessous. Sur un écran de bureau, tout tient dans la
   hauteur : chaque bloc défile en lui-même, jamais la page, jamais en largeur. */
.od-sv-onglets { flex: none; }
.od-sv-onglets button { flex: 0 1 auto; max-width: 260px; }
.od-sv-onglets .od-sv-ong-plus { margin-left: auto; }
.od-sv-ong { display: inline-flex !important; align-items: center; gap: 7px; max-width: 100%; }
.od-sv-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9aa59a; }
.od-sv-point--ok { background: #3fa31d; box-shadow: 0 0 0 3px color-mix(in srgb, #3fa31d 22%, transparent); }
.od-sv-point--attente { background: #d99a0b; }
.onglets button[aria-selected="true"] .od-sv-point { background: #fff; box-shadow: none; }
.od-sv-bloc { margin: 0 !important; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.od-sv-bloc > * { flex: none; }
.od-sv-bloc .od-sv-defile { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.od-sv-bloc .od-sv-pied { margin-top: auto; }
.od-sv-panneau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.od-sv-apps { grid-column: 1 / -1; }
.od-sv-apps h3 { margin-top: 0; }
.od-sv-apps .ma-dr { margin: 0; }
.od-sv-ajout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.od-sv-acces .in-dg-form { margin-top: 0; }
@media (min-width: 1000px) and (min-height: 620px) {
  .cadre > .zone > .od-sv:only-child { height: 100%; }
  .od-sv { height: 100%; min-height: 0; }
  .od-sv-panneau { flex: 1; min-height: 0; grid-template-rows: minmax(0, auto) minmax(0, 1fr); }
  .od-sv-panneau--seul { grid-template-rows: minmax(0, 1fr); }
  .od-sv-panneau > .od-sv-bloc { min-height: 0; max-height: 290px; overflow: hidden; }
  .od-sv-panneau--seul > .od-sv-bloc { max-height: none; }
  .od-sv-panneau > .od-sv-apps { max-height: none; overflow: hidden; }
  .od-sv-apps .ma-dr { flex: 1 1 0; height: auto; min-height: 150px; }
  .od-sv-ajout { flex: 1; min-height: 0; }
  .od-sv-ajout > .od-sv-bloc { max-height: 100%; overflow-y: auto; }
}
@media (max-width: 900px) { .od-sv-panneau, .od-sv-ajout { grid-template-columns: minmax(0, 1fr); } }
.od-sv-carte .od-sv-tete { gap: 8px; }
.od-sv-faits { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 6px 28px; }
.od-sv-faits dt { color: var(--doux); font-size: 0.75rem; }
.od-sv-faits dd { margin: 2px 0 0; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-sv-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.od-sv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.od-sv-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--in-mauve-fond, #f1ebff); color: var(--texte); transition: background .15s; }
.od-sv-chip svg { flex: none; color: var(--in-mauve, #7c3aed); }
.od-sv-chip b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-sv-chip-x { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--doux); font-size: 1rem; line-height: 1; cursor: pointer; }
.od-sv-chip-x:hover { background: color-mix(in srgb, var(--rouge) 14%, transparent); color: var(--rouge); }
.od-sv-chip--arme { background: color-mix(in srgb, var(--rouge) 12%, var(--carte)); animation: od-sv-secoue .25s ease-out; }
.od-sv-chip-oui { border: 0; border-radius: 999px; padding: 3px 10px; background: var(--rouge); color: #fff; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
@keyframes od-sv-secoue { 0%, 100% { transform: none; } 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
.od-sv-donner { margin: 0 !important; flex-wrap: nowrap !important; align-items: center !important; }
.od-sv-donner label { flex: 1; min-width: 0; }
.od-sv-donner label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.od-sv-apps > .in-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-sv-carte .od-sv-pied { margin-top: auto; padding-top: 10px; }
.od-sv-bloc .in-note, .od-sv-bloc .in-note--haut { margin: 0 !important; }
.od-sv-guide li::marker { color: var(--in-mauve, #7c3aed); font-weight: 700; }
/* Mon SERVER > Mes données (odesa-donnees.js) : plan des espaces à gauche, contenu à droite.
   La page ne défile pas : l'arbre, les cartes, les panneaux et les lignes défilent en eux-mêmes. */
.dn { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; height: clamp(420px, calc(100vh - 400px), 1000px); min-height: 0; }
.dn-arbre { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.dn-arbre-tete { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--bord); color: var(--doux); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dn-arbre-liste { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 6px; }
.dn-noeud { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px 7px calc(10px + var(--prof, 0) * 14px); border: 0; border-radius: 8px; background: transparent; color: var(--texte); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
.dn-noeud > span:last-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-noeud:hover { background: var(--neutre); }
.dn-noeud.is-actif { background: var(--in-mauve-fond); color: var(--in-mauve); font-weight: 600; }
.dn-noeud.is-chemin { color: var(--doux); }
.dn-noeud-pic { display: inline-flex; flex: none; color: var(--doux); }
.dn-plier { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; margin-left: -4px; border-radius: 5px; color: var(--doux); transition: transform .15s, background .12s; }
.dn-plier.is-ouvert { transform: rotate(90deg); }
.dn-plier:not(.is-vide):hover { background: var(--neutre); color: var(--texte); }
.dn-plier:focus-visible { outline: 2px solid var(--in-mauve); }
.dn-noeud.is-actif .dn-plier { color: var(--in-mauve); }
.dn-noeud--table .dn-noeud-pic { color: var(--in-mauve); }
.dn-pt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dn-pt--mauve { background: var(--in-mauve); }
.dn-pt--orange { background: var(--in-orange); }
.dn-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.dn-main > * { flex: none; }
.dn-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dn-cherche { flex: 1 1 260px; }
.dn-portee { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--bord); border-radius: 10px; }
.dn-portee button { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--doux); font: inherit; font-size: 0.875rem; cursor: pointer; }
.dn-portee button.is-actif { background: var(--in-mauve-fond); color: var(--in-mauve); font-weight: 600; }
.dn-portee button:disabled { opacity: .45; cursor: default; }
.dn-pastille { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--in-mauve); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; }
.dn-ajout { position: relative; }
.dn-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); box-shadow: var(--ombre); }
.dn-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.dn-menu button:hover { background: var(--neutre); }
.dn-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.dn-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--doux); font-size: 0.875rem; }
.dn-ariane button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.dn-ariane button:hover { background: var(--neutre); color: var(--texte); }
.dn-ariane b { color: var(--texte); padding: 3px 6px; }
.dn-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dn-actes .btn, .dn-barre .btn { display: inline-flex; align-items: center; gap: 8px; }
.dn-defile { flex: 1 1 0 !important; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.dn-defile--panneau { display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.dn-defile--panneau > * { flex: none; }
.dn-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 2px 2px 8px; }
.dn-carte { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--bord); border-top: 4px solid var(--c, var(--in-mauve)); border-radius: 12px; background: var(--carte); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.dn-carte:hover { box-shadow: var(--ombre); transform: translateY(-1px); }
.dn-carte.is-chemin { opacity: .65; }
.dn-carte-pic { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; color: var(--c, var(--in-mauve)); background: var(--in-mauve-fond); }
.dn-carte-corps { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dn-carte .dn-badge { max-width: 100%; white-space: normal; line-height: 1.35; }
.dn-carte-corps b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dn-carte-corps small { color: var(--doux); font-size: 0.8125rem; }
.dn-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; font-style: normal; white-space: nowrap; vertical-align: 1px; }
.dn-badge--mauve { color: var(--in-mauve); background: var(--in-mauve-fond); }
.dn-badge--orange { color: var(--in-orange); background: var(--in-orange-fond); }
.dn-badge--rouge { color: var(--in-rouge); background: var(--in-rouge-fond); }
.dn-res { display: flex; flex-direction: column; gap: 14px; }
.dn-res-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dn-res-groupe { border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.dn-res-groupe h3 { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--bord); background: var(--neutre); font-size: 0.9375rem; }
.dn-res-groupe h3 button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.dn-res-ligne { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--bord); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dn-res-ligne:last-child { border-bottom: 0; }
.dn-res-ligne:hover { background: var(--neutre); }
.dn-res-ligne small { color: var(--doux); font-size: 0.8125rem; }
.dn-res-groupe .oa-msg { padding: 8px 14px; }
.dn-carte-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; }
.dn-res-groupe h3 small { font-weight: 500; }
.dn-dem-ligne { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; cursor: default; }
.dn-dem-ligne:hover { background: transparent; }
.dn-res-groupe h3 > span, .dn-dem-ligne > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.dn-table-tete { display: flex; align-items: center; gap: 14px; }
.dn-table-titre { flex: 1; min-width: 0; }
.dn-table-titre .dn-ariane { font-size: 0.8125rem; margin-left: -6px; }
.dn-table-tete h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 1.1875rem; }
.dn-table-tete h2 small { color: var(--doux); font-size: 0.8125rem; font-weight: 500; }
.dn-table-tete > .btn { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.dn-onglets { margin-top: -4px; }
.dn-corps { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0 !important; min-height: 0; }
.dn-corps > * { flex: none; }
.dn-lignes, .dn-table { border: 1px solid var(--bord); border-radius: 12px; }
.dn-table { overflow-x: auto; }
.dn-lignes { flex: 1 1 0 !important; min-height: 120px; overflow: auto; scrollbar-gutter: stable; }
.dn-tr { display: grid; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--bord); background: transparent; color: var(--texte); font: inherit; font-size: 0.875rem; text-align: left; }
button.dn-tr { cursor: pointer; }
button.dn-tr:hover { background: var(--neutre); }
.dn-tr:last-child { border-bottom: 0; }
.dn-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-tr code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.75rem; }
.dn-th { position: sticky; top: 0; z-index: 1; background: var(--carte); color: var(--doux); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dn-tr-actes { display: inline-flex; align-items: center; gap: 6px; }
.dn-masque { display: inline-flex; align-items: center; gap: 4px; color: var(--doux); font-size: 0.75rem; font-style: normal; }
.dn-pied { margin: 0 !important; color: var(--doux); font-size: 0.8125rem; }
.dn-act { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; font-style: normal; white-space: nowrap; }
.dn-act--vert { color: var(--in-vert); background: var(--in-vert-fond); }
.dn-act--orange { color: var(--in-orange); background: var(--in-orange-fond); }
.dn-act--rouge { color: var(--in-rouge); background: var(--in-rouge-fond); }
.dn-act--bleu { color: var(--in-bleu); background: var(--in-bleu-fond); }
.dn-act--mauve { color: var(--in-mauve); background: var(--in-mauve-fond); }
.dn-act--gris { color: var(--doux); background: var(--neutre); }
.dn-tr--jnl { align-items: start; }
.dn-tr--jnl > span { padding-top: 2px; }
.dn-tr > span.dn-chgs { display: flex; flex-direction: column; gap: 2px; white-space: normal; overflow: visible; }
.dn-chg { overflow-wrap: anywhere; line-height: 1.45; }
.dn-chg b { font-weight: 600; }
.dn-chg s { color: var(--doux); }
.dn-tr > span.dn-quand { white-space: normal; line-height: 1.5; }
.dn-tr > span.dn-qui { display: flex; flex-direction: column; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.dn-qui small { font-size: 0.75rem; }
.dn-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.75rem; color: var(--doux); }
.dn-icone { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--doux); cursor: pointer; }
.dn-icone:hover { background: var(--neutre); color: var(--texte); }
.dn-coche { display: inline-flex; justify-content: flex-start; }
.dn-coche input { width: 18px; height: 18px; accent-color: var(--in-mauve); }
.dn-acl-vide { padding: 12px 14px; }
.dn-acl-ajout { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.dn-acl-ajout select { flex: 1 1 160px; width: auto; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--texte); font: inherit; }
.dn-acl-ajout .btn { display: inline-flex; align-items: center; gap: 6px; }
.dn-herites { margin: 0; padding-left: 18px; line-height: 1.8; font-size: 0.875rem; }
.dn-jnl { border-left: 4px solid var(--bord); }
.dn-jnl--on { border-left-color: var(--in-mauve); }
.dn-jnl h3 { display: flex; align-items: center; gap: 8px; }
.dn-jnl p { margin: 0 0 12px !important; line-height: 1.5; }
.dn-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dn-puce { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--bord); border-radius: 999px; font-size: 0.875rem; cursor: pointer; }
.dn-puce input { accent-color: var(--in-mauve); }
.dn-modale .oa-champ-form select, .dn-modale .oa-champ-form textarea { padding: 8px 12px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--texte); font: inherit; font-weight: 400; }
.dn-modale .oa-champ-form select { height: 40px; }
.dn-modale .oa-champ-form small { font-weight: 400; line-height: 1.4; }
.dn-modale .oa-form { max-height: min(70vh, 640px); }
.dn-pied-gauche { margin-right: auto; }
.dn-pieces { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; font-size: 0.875rem; }
.dn-piece { display: flex; align-items: center; gap: 8px; }
.dn-piece > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-joindre { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; cursor: pointer; }
.dn-badge--vert { color: var(--in-vert); background: var(--in-vert-fond); }
.dn-badge--gris { color: var(--doux); background: rgba(127,127,127,.14); }
.dn-pt--rouge { background: var(--in-rouge); }
.dn-piece--lien > span { white-space: normal; }
.dn-chemin { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--doux); font-size: 0.75rem; }
.dn-pieces-actes { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dn-relier { display: flex; gap: 6px; }
.dn-pf-ouvrir { flex: none; }
.dn-pf-fond { position: fixed; inset: 0; z-index: 1100; background: rgba(15, 23, 42, .35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dn-pf { width: min(640px, 100%); max-height: min(640px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--carte); border-radius: 14px; box-shadow: 0 20px 60px rgba(15, 23, 42, .25); overflow: hidden; }
.dn-pf-tete { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bord); }
.dn-pf-tete b { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; }
.dn-pf-corps { flex: 1 1 auto; min-height: 160px; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.dn-pf-lib { margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--doux); }
.dn-pf-ici { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--neutre); min-width: 0; }
.dn-pf-ici code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.dn-pf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dn-pf-liste button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--texte); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.dn-pf-liste button:hover, .dn-pf-liste button:focus-visible { background: var(--in-mauve-fond); color: var(--in-mauve); outline: none; }
.dn-pf-liste button span:not(.ms) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-pf-liste button small { flex: none; color: var(--doux); font-size: .74rem; }
.dn-pf-liste button[data-od="dn-pf-aller"] .ms:first-child { color: #d4a017; }
.dn-pf-liste button.is-pris { background: var(--in-mauve-fond); color: var(--in-mauve); font-weight: 600; }
.dn-pf-pied { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--bord); }
.dn-pf-pied .btn { display: inline-flex; align-items: center; gap: 6px; }
.dn-relier input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 9px; background: var(--fond, #fff); color: var(--texte); font: inherit; }
.dn-lien { display: inline-flex; align-items: center; gap: 4px; font-style: normal; color: var(--in-bleu); }
.dn-lien--perdu { color: var(--doux); text-decoration: line-through; }
.dn-lien-champ input[type="search"] { margin-bottom: 6px; }
@media (min-width: 1000px) and (min-height: 620px) {
  .mp.cadre .mp-ix > .dn-cadre > .dn { flex: 1 1 0; height: auto; }
}
@media (max-width: 900px) {
  .dn { grid-template-columns: minmax(0, 1fr); height: auto; }
  .dn-arbre { max-height: 240px; }
  .dn-arbre-liste { flex: none; max-height: 190px; }
  .dn-defile, .dn-lignes { max-height: 60vh; flex: none !important; }
}


/* ------------------------------------------------ Mes applications (data apps, odesa-mesapps.js) */
@font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 400; font-display: block;
  src: url("../fonts/material-symbols-outlined.woff2") format("woff2"); }
.ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased; overflow: hidden; width: 1em; flex: none; }
.ma { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 12px; }
.ma .btn .ms { margin-right: 6px; }
.ma .btn--icone .ms { margin: 0; }
.ma-barre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ma-cherche { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--bord); border-radius: 12px; padding: 0 12px; background: var(--fond-carte, #fff); }
.ma-cherche input { border: 0; outline: 0; background: transparent; flex: 1; padding: 11px 0; font: inherit; }
.ma-defile { flex: 1; min-height: 0; overflow: auto; padding: 2px; }
.ma-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ma-carte { --ma-c: #7c3aed; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--bord); border-top: 4px solid var(--ma-c);
  border-radius: 14px; background: var(--fond-carte, #fff); min-width: 0; }
.ma-carte-tete { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ma-tuile { width: 52px; height: 52px; border-radius: 14px; background: var(--ma-c, #7c3aed); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 6px 14px -8px var(--ma-c, #7c3aed); }
.ma-tuile--petite { width: 40px; height: 40px; border-radius: 11px; }
.ma-carte-titre { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ma-carte-titre b { font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.ma-carte-titre small { color: var(--doux); font-size: 0.8125rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ma-carte-desc { margin: 0; color: var(--doux); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.4em; }
.ma-carte-acces { min-height: 30px; display: flex; align-items: center; }
.ma-acces-aucun { color: var(--doux); font-size: 0.8125rem; }
.ma-avatars { display: flex; }
.ma-avatar { width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--ma-c) 18%, #fff); color: var(--ma-c); border: 2px solid var(--fond-carte, #fff);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; margin-left: -6px; }
.ma-avatar:first-child { margin-left: 0; }
.ma-avatar--concepteur { background: var(--ma-c); color: #fff; }
.ma-avatar--plus { background: var(--fond, #f4f6f1); color: var(--doux); }
.ma-carte-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ma-carte-actions .btn--plein { margin-left: auto; }
/* Le pied de la carte : une barre, des boutons-icônes, « Ouvrir » à droite. */
.ma-carte { padding-bottom: 0; overflow: hidden; }
.ma-carte-pied { display: flex; align-items: center; gap: 8px; margin: auto -18px 0; padding: 10px 14px; border-top: 1px solid var(--bord); background: color-mix(in srgb, var(--ma-c) 4%, #fff); }
.ma-carte-ico { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--bord); border-radius: 10px;
  background: #fff; color: var(--ma-c); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.ma-carte-ico:hover { background: color-mix(in srgb, var(--ma-c) 10%, #fff); border-color: color-mix(in srgb, var(--ma-c) 40%, transparent); }
.ma-carte-ouvrir { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--ma-c); color: #fff;
  font: inherit; font-size: 0.875rem; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 10px -6px var(--ma-c); }
.ma-carte-ouvrir:hover { filter: brightness(1.08); }
.ma-carte-statut { margin-left: auto; color: var(--doux); font-size: 0.8125rem; white-space: nowrap; }
.ma-note { color: var(--doux); font-size: 0.8125rem; margin: 10px 2px 0; }
.ma-concepteur { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.ma-c-tete { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ma-c-titre { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ma-c-titre small { color: var(--doux); font-size: 0.8125rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ma-modifie { color: var(--in-orange, #e8710a); font-style: normal; font-weight: 600; }
.ma-c-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ma-c-corps { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 12px; flex: 1; min-height: 0; }
.ma-arbre, .ma-fiche { border: 1px solid var(--bord); border-radius: 14px; background: var(--fond-carte, #fff); display: flex; flex-direction: column; min-height: 0; }
.ma-arbre-tete { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--bord); }
.ma-arbre-liste { flex: 1; overflow: auto; padding: 6px; min-height: 120px; }
.ma-arbre-pied { display: flex; gap: 4px; padding: 8px; border-top: 1px solid var(--bord); }
.ma-noeud { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 7px 10px; cursor: pointer; font: inherit; color: inherit; }
.ma-noeud:hover { background: var(--fond, #f4f6f1); }
.ma-noeud.is-actif { background: color-mix(in srgb, var(--ma-c) 14%, #fff); }
.ma-noeud-txt { display: flex; flex-direction: column; min-width: 0; }
.ma-noeud-txt b { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-noeud-txt small { color: var(--doux); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma .ma-onglets { padding: 0 12px; flex: none; align-self: auto; }
.ma-fiche > .ma-erreurs { flex: none; }
.ma-fiche-corps { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ma .ma-fiche-corps > * { flex: none; }
.ma-modale .oa-form { display: flex; flex-direction: column; gap: 10px; }
.ma .ma-modale .oa-form > * { flex: none; }
.ma-ligne { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ma-champ { flex: 1; min-width: 160px; margin: 0; }
.ma-champ--large { flex-basis: 100%; }
.ma-champ input, .ma-champ select, .ma-champ textarea { width: 100%; letter-spacing: 0; }
.ma-icone-champ { display: flex; gap: 8px; align-items: center; }
.ma-cases { border: 1px solid var(--bord); border-radius: 12px; padding: 8px 12px 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.ma-cases legend { color: var(--doux); font-size: 0.8125rem; padding: 0 4px; }
.ma-cases--bloc { flex-direction: column; flex-wrap: nowrap; }
.ma-contrainte { display: grid; grid-template-columns: 1.2fr 0.9fr 1fr 1fr auto; gap: 6px; align-items: center; }
.ma-contrainte--2 { grid-template-columns: 1fr 1fr auto; }
.ma-contrainte select, .ma-contrainte input { width: 100%; min-width: 0; letter-spacing: 0; }
.ma-erreurs { border-top: 1px solid var(--bord); padding: 10px 16px; max-height: 30%; overflow: auto; color: var(--in-rouge, #d93025); font-size: 0.85rem; }
.ma-erreurs b { display: flex; gap: 6px; align-items: center; }
.ma-erreurs ul { margin: 6px 0 0; padding-left: 18px; }
.ma-erreurs--ok { color: var(--in-vert, #0f9d58); display: flex; gap: 6px; align-items: center; }
.ma-modale--large { width: min(920px, calc(100vw - 32px)); }
.ma-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-height: 196px; overflow: auto; padding: 2px; }
.ma-icone { height: 44px; border: 1px solid var(--bord); border-radius: 10px; background: var(--fond-carte, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center; color: inherit; }
.ma-icone.is-actif { border-color: var(--in-mauve, #7c3aed); box-shadow: 0 0 0 2px color-mix(in srgb, var(--in-mauve, #7c3aed) 30%, transparent); }
.ma-couleurs { align-items: center; margin: 4px 0; }
.ma-pastille { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bord); cursor: pointer; }
.ma-pastille.is-actif { box-shadow: 0 0 0 2px var(--texte, #1d2a17); }
.ma-json { width: 100%; min-height: 50vh; font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; letter-spacing: 0; }
.ma-versions { display: flex; flex-direction: column; gap: 8px; }
.ma-version { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px; }
.ma-version span:nth-child(2) { color: var(--doux); flex: 1; font-size: 0.875rem; }
.ma-apercu { max-height: 40vh; overflow: auto; }
/* Les droits des applications, sur la carte d'un serveur : la liste à gauche, l'application
   choisie à droite ; hauteur fixe, défilement interne, jamais de défilement horizontal. */
.ma-dr { --dad-primary: var(--vert-fonce); --dad-border: var(--bord); margin: 6px 0 12px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  height: 380px; border: 1px solid var(--bord); border-radius: 14px; background: var(--carte); overflow: hidden; }
.ma-dr-gauche { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--bord); background: var(--champ-lecture); }
.ma-dr-cherche { flex: none; display: flex; align-items: center; gap: 8px; margin: 10px; padding: 0 10px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--doux); }
.ma-dr-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--texte); font: inherit; padding: 8px 0; }
.ma-dr-liste { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.ma-dr-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px;
  background: transparent; color: var(--texte); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; transition: background .12s; }
.ma-dr-item:hover { background: var(--neutre); }
.ma-dr-item.actif { background: var(--pastille); color: var(--pastille-texte); font-weight: 600; }
.ma-dr-item[hidden] { display: none; }
.ma-dr-item-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-dr-compte { font-size: 0.72rem; font-weight: 500; color: var(--pastille-texte); white-space: nowrap; }
.ma-dr-compte--vide { color: var(--doux); margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--neutre); }
.ma-dr-droite { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 14px; }
.ma-dr-titre { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 10px; }
.ma-dr-titre b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-dr-gens { display: flex; flex-direction: column; }
.ma-dr-personne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.ma-dr-personne:last-child { border-bottom: 0; }
.ma-dr-qui { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--doux); }
.ma-dr-qui b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte); font-weight: 500; }
.ma-dr-seg { display: inline-flex; padding: 2px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ-lecture); }
.ma-dr-opt { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--doux);
  font: inherit; font-size: 0.8rem; cursor: pointer; transition: background .12s, color .12s; }
.ma-dr-opt:hover { color: var(--texte); }
.ma-dr-opt.actif { background: var(--carte); color: var(--texte); box-shadow: 0 1px 2px rgba(20, 33, 15, .12); }
.ma-dr-opt--utiliser.actif { background: var(--vert-fonce); color: #fff; }
.ma-dr-opt--concevoir.actif { background: #6d28d9; color: #fff; }
.ma-dr-opt.en-cours { opacity: .55; pointer-events: none; animation: ma-dr-pulse .8s ease-in-out infinite alternate; }
@keyframes ma-dr-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vert) 45%, transparent); } to { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vert) 0%, transparent); } }
/* Étroit : les libellés des choix laissent la place aux icônes ; très étroit, liste au-dessus. */
@media (max-width: 1100px) { .ma-dr-opt span { display: none; } .ma-dr-opt { padding: 5px 8px; } }
@media (max-width: 640px) { .ma-dr { grid-template-columns: minmax(0, 1fr); grid-template-rows: 190px minmax(0, 1fr); height: 470px; }
  .ma-dr-gauche { border-right: 0; border-bottom: 1px solid var(--bord); } }
.ma-tuile--mini { width: 24px; height: 24px; border-radius: 7px; box-shadow: none; }
@media (max-width: 760px) {
  .ma-c-corps { grid-template-columns: 1fr; }
  .ma-arbre { max-height: 240px; }
  .ma-contrainte { grid-template-columns: 1fr 1fr; }
}


/* ------------------------------------------------ Mes applications : le concepteur
   Repris du concepteur des « Apps DB » de VAILS Agents (layout.css, classes dad-),
   dans les couleurs de ProAdmin ; --dad-primary prend la couleur de l'application. */
.ma .data-app-designer { --dad-primary: #1f6feb; --dad-bg: #f5f7fa; --dad-panel: #fff; --dad-border: #e3e8ef; --dad-muted: #64748b;
  display: flex; flex-direction: column; min-height: 0; flex: 1; border: 1px solid var(--dad-border); border-radius: 14px; overflow: hidden; background: var(--dad-bg); color: #1e293b; }
.ma .dad-topbar { min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 8px 18px; background: var(--dad-panel); border-bottom: 1px solid var(--dad-border); flex: none; flex-wrap: wrap; }
.ma .dad-app-mark { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--dad-primary) 14%, #fff); color: var(--dad-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.ma .dad-title-block { min-width: 0; flex: 1; }
.ma .dad-title-block h1 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma .dad-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; color: var(--dad-muted); font-size: 0.75rem; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.ma .dad-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 180px; }
.ma .dad-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 2px 0; border-radius: 999px; background: #cbd5e1; }
.ma .dad-modifie { color: #c2410c; font-weight: 700; }
.ma .dad-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ma .dad-actions .btn { padding: 7px 12px; min-height: 0; font-size: 0.875rem; }
.ma .dad-actions .btn .ms, .ma .dad-add-row .ms, .ma .dad-modal .btn .ms { margin-right: 6px; }
.ma .dad-btn-icon { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--dad-muted); cursor: pointer; padding: 0; }
.ma .dad-btn-icon:hover { background: var(--dad-bg); color: var(--dad-primary); }
.ma .dad-btn-icon:disabled { opacity: 0.42; cursor: default; }
.ma .dad-btn-icon.danger { color: #c0392b; }
.ma .dad-btn-cadre { border: 1px solid var(--dad-border); background: var(--dad-panel); width: 32px; height: 32px; }
.ma .dad-msg { margin: 10px 18px 0; padding: 9px 12px; border-radius: 10px; font-size: 0.875rem; flex: none; }
.ma .dad-msg--ok { background: #e7f6ec; color: #166534; }
.ma .dad-msg--ko { background: #fdecea; color: #b42318; }
.ma .dad-workbench { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
.ma .dad-sidebar { min-height: 0; background: var(--dad-panel); border-right: 1px solid var(--dad-border); padding: 16px; display: flex; flex-direction: column; overflow: hidden; }
.ma .dad-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 0.875rem; font-weight: 700; }
.ma .dad-tree-tools { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; margin-bottom: 8px; }
.ma .dad-tree-search { min-width: 0; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--dad-border); border-radius: 6px; background: var(--dad-bg); color: var(--dad-muted); }
.ma .dad-tree-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 0.875rem; padding: 0; }
.ma .dad-search-status { margin-bottom: 6px; color: var(--dad-muted); font-size: 0.75rem; font-weight: 700; }
.ma .dad-node-list { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; padding-right: 2px; flex: 1; }
.ma .dad-tree-item { display: flex; flex-direction: column; gap: 6px; }
.ma .dad-tree-children { margin-left: 18px; padding-left: 10px; border-left: 1px solid var(--dad-border); display: flex; flex-direction: column; gap: 6px; }
.ma .dad-node { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ma .dad-node:hover { background: var(--dad-bg); }
.ma .dad-node.active { background: color-mix(in srgb, var(--dad-primary) 11%, #fff); border-color: color-mix(in srgb, var(--dad-primary) 28%, transparent); color: var(--dad-primary); }
.ma .dad-node.search-hit { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.1); }
.ma .dad-node-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ma .dad-node-text strong, .ma .dad-node-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma .dad-node-text strong { font-size: 0.875rem; font-weight: 600; }
.ma .dad-node-text small { color: var(--dad-muted); font-size: 0.75rem; }
.ma .dad-main { min-width: 0; min-height: 0; padding: 20px; overflow: auto; display: flex; flex-direction: column; gap: 20px; }
.ma .dad-panel { background: var(--dad-panel); border: 1px solid var(--dad-border); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); padding: 20px; flex: none; }
.ma .dad-panel-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ma .dad-panel-title > .ms { color: var(--dad-primary); }
.ma .dad-panel-title h2 { margin: 0; flex: 1; font-size: 1rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma .dad-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ma .dad-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; }
.ma .dad-field.wide { grid-column: 1 / -1; }
.ma .dad-field > span { color: var(--dad-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.ma .dad-input { width: 100%; min-height: 38px; box-sizing: border-box; border: 1px solid var(--dad-border); border-radius: 8px; background: var(--dad-panel); color: inherit; padding: 0 12px; font: inherit; font-size: 0.9rem; letter-spacing: 0; }
.ma textarea.dad-input { padding: 10px 12px; resize: vertical; }
.ma .dad-input:focus { border-color: var(--dad-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dad-primary) 14%, transparent); outline: none; }
.ma .dad-input:disabled { background: var(--dad-bg); color: var(--dad-muted); }
.ma .dad-builder-tabs { display: flex; margin: -4px 0 16px; border: 1px solid var(--dad-border); border-radius: 10px; background: var(--dad-bg); overflow: hidden; flex-wrap: wrap; }
.ma .dad-tab { flex: 1 1 0; min-width: 96px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border: 0; background: transparent; color: var(--dad-muted); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.ma .dad-tab .ms { font-size: 18px; }
.ma .dad-tab.active { color: var(--dad-node-color, var(--dad-primary)); background: color-mix(in srgb, var(--dad-node-color, var(--dad-primary)) 13%, transparent); }
.ma .dad-icon-picker-btn { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--dad-border); border-radius: 8px; background: var(--dad-panel); color: inherit; padding: 0 12px; cursor: pointer; font: inherit; }
.ma .dad-icon-picker-btn:hover { border-color: var(--dad-primary); }
.ma .dad-icon-picker-btn .ms { color: var(--dad-primary); }
.ma .dad-icon-picker-btn strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 600; }
.ma .dad-color-picker { min-height: 38px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 6px; border: 1px solid var(--dad-border); border-radius: 8px; background: var(--dad-panel); }
.ma .dad-color-input { width: 34px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.ma .dad-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.ma .dad-color-input::-webkit-color-swatch { border: 0; border-radius: 6px; }
.ma .dad-color-chip { width: 10px; height: 10px; flex: none; border-radius: 999px; box-shadow: 0 0 0 3px rgba(91, 124, 199, 0.12); }
.ma .dad-color-picker strong { font-size: 0.875rem; font-weight: 700; }
.ma .dad-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ma .dad-check-list { display: flex; flex-direction: column; gap: 8px; }
.ma .dad-check-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--dad-border); border-radius: 8px; background: var(--dad-panel); font-size: 0.875rem; cursor: pointer; margin: 0; }
.ma .dad-check-row > .ms { font-size: 18px; color: var(--dad-primary); }
.ma .dad-check-row span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ma .dad-check-row small { color: var(--dad-muted); font-size: 0.75rem; }
/* Case à cocher posée dans la grille (.dad-field) : case, icône et texte sur une ligne. */
.ma .dad-check-row.dad-field { flex-direction: row; gap: 10px; }
.ma .dad-check-row.dad-field > input { flex: none; margin: 0; }
.ma .dad-check-row.dad-field > span { flex: 1; color: inherit; font-size: 0.875rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ma .dad-check-row.dad-field small { font-weight: 400; }
.ma .dad-version { cursor: default; }
.ma .dad-version > span:nth-child(2) { flex: 1; }
.ma .dad-builder-list { display: flex; flex-direction: column; gap: 10px; }
.ma .dad-builder-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 0.8fr) minmax(170px, 1.2fr) 36px; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--dad-border); border-radius: 10px; background: var(--dad-panel); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.ma .dad-bind-row { grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1.2fr) 36px; }
.ma .dad-builder-control { min-width: 0; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ma .dad-builder-control > span { display: flex; align-items: center; gap: 4px; color: var(--dad-muted); font-size: 10px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.ma .dad-builder-control > span .ms { color: var(--dad-primary); }
.ma .dad-builder-control .dad-input { background: var(--dad-bg); }
.ma .dad-valeur { display: flex; gap: 6px; min-width: 0; }
.ma .dad-valeur > * { flex: 1; min-width: 0; }
.ma .dad-remove-row { width: 36px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(192, 57, 43, 0.22); border-radius: 8px; background: rgba(192, 57, 43, 0.06); color: #c0392b; cursor: pointer; padding: 0; }
.ma .dad-remove-row:hover { background: rgba(192, 57, 43, 0.12); }
.ma .dad-add-row { align-self: flex-start; margin-top: 8px; padding: 7px 12px; min-height: 0; font-size: 0.875rem; }
.ma .dad-note { color: var(--dad-muted); font-size: 0.8125rem; margin: 0 0 6px; }
.ma .dad-aide { color: var(--dad-muted); font-size: 0.75rem; line-height: 1.4; }
.ma .dad-aide b { color: #1e293b; }
.ma .dad-gabarit { position: relative; }
.ma .dad-ac { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 240px; overflow: auto; background: #fff; border: 1px solid var(--dad-border);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16); padding: 4px; }
.ma .dad-ac[hidden] { display: none; }
.ma .dad-ac-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: inherit; font-size: 0.875rem; text-align: left; color: inherit; }
.ma .dad-ac-item small { margin-left: auto; color: var(--dad-muted); font-size: 0.72rem; }
.ma .dad-ac-item .ms { color: var(--dad-primary); }
.ma .dad-ac-item:hover, .ma .dad-ac-item.active { background: color-mix(in srgb, var(--dad-primary) 10%, #fff); }
.ma .dad-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ma .dad-puces small { color: var(--dad-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.ma .dad-puce { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px 3px 6px; border: 1px solid var(--dad-border); border-radius: 999px; background: var(--dad-bg);
  font: inherit; font-size: 0.8125rem; color: inherit; cursor: pointer; }
.ma .dad-puce:hover { border-color: var(--dad-primary); color: var(--dad-primary); background: color-mix(in srgb, var(--dad-primary) 8%, #fff); }
.ma .dad-puce .ms { color: var(--dad-primary); }
.ma .dad-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 140px; color: var(--dad-muted); text-align: center; }
.ma .dad-empty.compact { min-height: 96px; border: 1px dashed var(--dad-border); border-radius: 10px; background: var(--dad-bg); padding: 10px; }
.ma .dad-empty .ms { color: #94a3b8; }
.ma .dad-empty p { margin: 0; font-size: 0.875rem; max-width: 420px; }
.ma .dad-erreurs { background: #fdecea; color: #b42318; border-radius: 12px; padding: 12px 16px; font-size: 0.875rem; flex: none; }
.ma .dad-erreurs b { display: flex; align-items: center; gap: 6px; }
.ma .dad-erreurs ul { margin: 6px 0 0; padding-left: 20px; }
.ma .dad-erreurs--ok { background: #e7f6ec; color: #166534; display: flex; align-items: center; gap: 6px; }
/* Fenêtres (dad-modal) et sélecteur d'icônes (IconPicker). */
.ma .dad-modal-backdrop { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(16, 24, 40, 0.48); }
.ma .dad-modal { --dad-primary: var(--ma-c, #1f6feb); --dad-bg: #f5f7fa; --dad-panel: #fff; --dad-border: #e3e8ef; --dad-muted: #64748b;
  width: min(640px, 96vw); max-height: min(840px, 92vh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--dad-border); border-radius: 16px; background: var(--dad-panel); box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22); color: #1e293b; }
.ma .dad-modal--large { width: min(1100px, 96vw); }
/* La fenêtre d'une application garde sa taille d'un onglet à l'autre. */
.ma .dad-modal--fixe { width: min(1100px, 96vw); height: min(760px, 92vh); max-height: none; }
.ma .dad-modal--fixe .dad-builder-tabs { flex: none; }
/* Les utilisateurs d'une application */
.ma .ma-ut-liste { display: flex; flex-direction: column; gap: 6px; }
.ma .ma-ut-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--dad-border, #e3e8ef); border-radius: 10px; background: #fff; }
.ma .ma-ut-ligne--on { border-color: color-mix(in srgb, var(--dad-primary) 45%, #fff); background: color-mix(in srgb, var(--dad-primary) 6%, #fff); }
.ma .ma-ut-qui { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ma .ma-ut-qui .ms { color: var(--dad-primary); }
.ma .ma-ut-choix { display: inline-flex; gap: 4px; flex: none; }
.ma .ma-ut-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid var(--dad-border, #e3e8ef); border-radius: 8px; background: #fff; font: inherit; font-size: 0.82rem; cursor: pointer; }
.ma .ma-ut-btn.actif { background: var(--dad-primary); border-color: var(--dad-primary); color: #fff; }
.ma .ma-carte-ico--reprendre { color: #1f7a10; }
/* Publier sur l'ODESA Store */
.ma .ma-st-h3 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 0.95rem; }
.ma .ma-st-h3 .ms { color: var(--dad-primary); }
.ma .ma-st-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.ma .ma-st-ref { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--dad-border, #e3e8ef); border-radius: 9px; background: #fff; cursor: pointer; }
.ma .ma-st-ref small { display: block; color: var(--dad-muted, #64748b); font-size: 0.75rem; }
.ma .ma-st-resume { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--dad-primary) 8%, #fff); }
.ma .ma-st-resume .ms { color: var(--dad-primary); }
.ma .ma-st-alertes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; }
.ma .ma-st-relu { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #fff7e6; font-weight: 600; }
.ma .ma-st-pubs { display: flex; flex-direction: column; gap: 6px; }
.ma .ma-st-pub { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--dad-border, #e3e8ef); border-radius: 9px; }
.ma .ma-st-pub small { color: var(--dad-muted, #64748b); }
.ma .ma-st-etat { padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: #eef2f7; color: #475569; }
.ma .ma-st-etat--soumis { background: #e4edfd; color: #1d5fd1; } .ma .ma-st-etat--validee { background: #e2f5d3; color: #1f7a10; }
.ma .ma-st-etat--refusee, .ma .ma-st-etat--retiree { background: #fde8ec; color: #b0122f; } .ma .ma-st-etat--suspendue { background: #fff0d9; color: #a65500; }
/* Le menu « Plus » du concepteur */
.ma .ma-plus-zone { position: relative; }
.ma .ma-plus-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--dad-border, #e3e8ef); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); }
.ma .ma-plus-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; color: inherit; }
.ma .ma-plus-menu button:hover { background: #f1f5f9; }
.ma .ma-plus-menu button .ms { color: var(--dad-primary); }
.ma .ma-plus-menu button.danger, .ma .ma-plus-menu button.danger .ms { color: #b0122f; }
.ma .ma-plus-menu button.danger { border-top: 1px solid var(--dad-border, #e3e8ef); border-radius: 0 0 8px 8px; margin-top: 4px; }
@media (max-width: 640px) { .ma .ma-ut-ligne { flex-direction: column; align-items: flex-start; } }
.ma .dad-modal-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--dad-border); background: var(--dad-bg); flex: none; }
.ma .dad-modal-head > div { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; min-width: 0; }
.ma .dad-modal-head > div > .ms { color: var(--dad-primary); }
.ma .dad-modal-body { min-height: 0; flex: 1; padding: 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.ma .dad-modal-body > * { flex: none; }
.ma .dad-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--dad-border); flex: none; }
.ma .dad-modal-foot .btn .ms { margin-right: 6px; }
.ma .dad-apercu-carte { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--dad-border); border-top: 4px solid var(--ma-c); border-radius: 12px; }
.ma .dad-apercu-carte > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ma .dad-apercu-carte small { color: var(--dad-muted); }
.ma .dad-json { min-height: 60vh; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.5; }
.ma .dad-preview-list { display: flex; flex-direction: column; gap: 8px; }
.ma .dad-preview-row { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--dad-border); border-radius: 8px; font-size: 0.875rem; }
.ma .dad-preview-row > .ms { color: var(--dad-primary); }
.ma .dad-preview-row span { display: flex; flex-direction: column; gap: 2px; }
.ma .dad-preview-row small { color: var(--dad-muted); font-size: 0.75rem; }
.ma .dad-mini-table { width: 100%; border-collapse: collapse; border: 1px solid var(--dad-border); font-size: 0.75rem; }
.ma .dad-mini-table th, .ma .dad-mini-table td { max-width: 160px; padding: 7px 8px; border-bottom: 1px solid var(--dad-border); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma .dad-mini-table th { color: var(--dad-muted); background: var(--dad-bg); font-weight: 700; }
.ma .dad-picker-fond { position: fixed; inset: 0; z-index: 400; }
.ma .dad-picker { position: fixed; width: 336px; max-height: 420px; display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22); overflow: hidden; }
.ma .dad-picker-tete { padding: 10px; border-bottom: 1px solid #e3e8ef; }
.ma .dad-picker-tete input { width: 100%; box-sizing: border-box; height: 36px; border: 1px solid #e3e8ef; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 0.875rem; letter-spacing: 0; }
.ma .dad-picker-corps { overflow: auto; padding: 8px 10px 12px; }
.ma .dad-picker-cat { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: #64748b; margin: 8px 2px 6px; }
.ma .dad-picker-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ma .dad-picker-btn { height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #334155; cursor: pointer; padding: 0; }
.ma .dad-picker-btn:hover { background: #f1f5f9; border-color: #e3e8ef; }
.ma .dad-picker-btn.active { background: color-mix(in srgb, var(--ma-c, #1f6feb) 14%, #fff); border-color: var(--ma-c, #1f6feb); color: var(--ma-c, #1f6feb); }
@media (max-width: 900px) {
  .ma .dad-workbench { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 34%) 1fr; }
  .ma .dad-sidebar { border-right: 0; border-bottom: 1px solid var(--dad-border); }
  .ma .dad-form-grid, .ma .dad-check-grid { grid-template-columns: 1fr; }
  .ma .dad-builder-row, .ma .dad-bind-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ Mes données : l'onglet Schéma (présentation de VAILS Agents) */
.dn-sch-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px solid var(--bord); border-radius: 14px;
  background: #f7f9f5; margin-bottom: 12px; color: var(--doux); flex-wrap: wrap; }
.dn-sch-tete b { color: #1d2a17; }
.dn-sch-table { border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; background: #fff; margin: 12px 0; }
.dn-sch-tr { display: grid; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #eef1ea; font-size: 0.9rem; }
.dn-sch-tr:first-child { border-top: 0; }
.dn-sch-th { background: #f7f9f5; color: var(--doux); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding-top: 12px; padding-bottom: 12px; }
.dn-sch-tr--verrou { background: #fafbf9; }
.dn-sch-tr[draggable="true"] { cursor: grab; }
.dn-sch-glisse { opacity: 0.45; }
.dn-sch-avant { box-shadow: inset 0 3px 0 var(--in-mauve, #7c3aed); }
.dn-sch-apres { box-shadow: inset 0 -3px 0 var(--in-mauve, #7c3aed); }
.dn-sch-poignee { color: #a3aca0; display: inline-flex; justify-content: center; }
.dn-sch-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dn-sch-champ b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-sch-champ > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dn-sch-champ code { font-size: 0.72rem; color: var(--doux); background: transparent; padding: 0; }
.dn-sch-contrainte { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
.dn-type-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 8px; font-size: 10.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.dn-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font: inherit; font-size: 0.78rem; font-weight: 700; border: 0; white-space: nowrap; }
button.dn-pill { cursor: pointer; }
button.dn-pill:hover { filter: brightness(0.95); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); }
.dn-pill--oui { background: #e3f6e8; color: #1f8a3e; }
.dn-pill--non { background: #eef0ec; color: #6b7468; }
.dn-pill--max { background: #e3eefc; color: #2563c4; }
.dn-vide { color: #b5bdb1; }
.dn-opt { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; white-space: nowrap; }
.dn-opt i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* La fenêtre d'un champ. */
.dn-f-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dn-f-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dn-f-grille .oa-champ-form { margin: 0; }
.dn-seg { display: inline-flex; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; background: #f7f9f5; }
.dn-seg-b { border: 0; background: transparent; padding: 8px 12px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--doux); cursor: pointer; }
.dn-seg-b + .dn-seg-b { border-left: 1px solid var(--bord); }
.dn-seg-b.is-actif { background: #fff; color: var(--in-mauve, #7c3aed); box-shadow: inset 0 -2px 0 var(--in-mauve, #7c3aed); }
.dn-opts { display: flex; flex-direction: column; gap: 6px; }
.dn-opt-l { display: grid; grid-template-columns: 38px 1fr 32px; gap: 6px; align-items: center; }
.dn-opt-l input[type="color"] { width: 38px; height: 34px; padding: 0; border: 1px solid var(--bord); border-radius: 8px; background: #fff; }
.dn-opts .btn { align-self: flex-start; }
@media (max-width: 760px) {
  .dn-f-grille, .dn-f-grille--3 { grid-template-columns: 1fr; }
}

.dn-sch-jnl { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--bord); border-radius: 14px; background: #f7f9f5; }
.dn-sch-jnl > .ms { color: var(--in-mauve, #7c3aed); }
.dn-sch-jnl > div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.dn-sch-jnl > div span { color: var(--doux); font-size: 0.85rem; }
.dn-sch-jnl--on { border-color: color-mix(in srgb, var(--in-mauve, #7c3aed) 35%, transparent); background: color-mix(in srgb, var(--in-mauve, #7c3aed) 5%, #fff); }
.dn-bascule { width: 46px; height: 26px; flex: none; border-radius: 999px; border: 0; background: #d5dbd1; position: relative; cursor: pointer; transition: background 0.15s; }
.dn-bascule i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left 0.15s; }
.dn-bascule.is-on { background: var(--in-mauve, #7c3aed); }
.dn-bascule.is-on i { left: 23px; }

.dn-choix { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; margin: 1px 2px 1px 0; }
.dn-etoiles { color: #f39c12; letter-spacing: 1px; }
.dn-couleur { display: inline-flex; align-items: center; gap: 5px; }
.dn-couleur i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--bord); display: inline-block; }
.dn-a { color: var(--in-mauve, #7c3aed); text-decoration: none; }
.dn-a:hover { text-decoration: underline; }
.dn-multi { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dn-suffixe { position: relative; display: flex; align-items: center; }
.dn-suffixe input { width: 100%; padding-right: 52px !important; }
.dn-suffixe i { position: absolute; right: 12px; font-style: normal; color: var(--doux); font-weight: 600; font-size: 0.85rem; }
.dn-mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }

.dn-modale--large { width: min(1000px, 96vw); }
.dn-depot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; border: 2px dashed var(--bord); border-radius: 14px; background: #f7f9f5; cursor: pointer; text-align: center; color: var(--doux); }
.dn-depot:hover { border-color: var(--in-mauve, #7c3aed); color: var(--in-mauve, #7c3aed); }
.dn-depot input { display: none; }
.dn-depot b { color: #1d2a17; }
.dn-imp-table { border: 1px solid var(--bord); border-radius: 12px; overflow: auto; max-height: 46vh; }
.dn-imp-tr { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr) minmax(150px, 1fr) minmax(130px, .9fr); gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid #eef1ea; font-size: 0.875rem; }
.dn-imp-tr:first-child { border-top: 0; }
.dn-imp-th { background: #f7f9f5; color: var(--doux); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; position: sticky; top: 0; }
.dn-imp-tr select { width: 100%; height: 34px; border: 1px solid var(--bord); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 0.85rem; background: #fff; }
.dn-imp-ex { color: var(--doux); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-imp-resume { display: flex; gap: 10px; flex-wrap: wrap; }
.dn-imp-resume span { padding: 8px 14px; border-radius: 10px; background: #f7f9f5; border: 1px solid var(--bord); color: var(--doux); }
.dn-imp-resume b { color: #1d2a17; font-size: 1.05rem; }
.dn-imp-apercu { overflow: auto; border: 1px solid var(--bord); border-radius: 10px; max-height: 34vh; }
.dn-imp-apercu table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }
.dn-imp-apercu th, .dn-imp-apercu td { padding: 6px 10px; border-bottom: 1px solid #eef1ea; text-align: left; white-space: nowrap; }
.dn-imp-apercu th { background: #f7f9f5; color: var(--doux); }
.dn-imp-prog { height: 8px; border-radius: 999px; background: #eef1ea; overflow: hidden; }
.dn-imp-prog i { display: block; height: 100%; background: var(--in-mauve, #7c3aed); transition: width 0.3s; }
.dn-imp-erreurs { max-height: 30vh; overflow: auto; border: 1px solid #f3c7c3; border-radius: 10px; background: #fdf3f2; padding: 8px 12px; font-size: 0.8125rem; display: flex; flex-direction: column; gap: 4px; }
.dn-sch-tete .dn-actes { display: flex; gap: 8px; flex-wrap: wrap; }
.dn-sch-tete .dn-actes .ms { margin-right: 6px; }

/* Fenêtre d'un champ : mise en page de l'éditeur de VAILS Agents. */
.dn-modale--champ { width: min(640px, 96vw); }
.dn-modale--champ .oa-form { gap: 14px; }
.dn-modale--champ .oa-champ-form > span, .dn-f-carte h4 { text-transform: uppercase; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; color: var(--doux); }
.dn-modale--champ .oa-champ-form input:not([type=checkbox]):not([type=color]), .dn-modale--champ .oa-champ-form select { background: #f4f5f8; border-color: #e3e6ec; }
.dn-f-carte { border: 1px solid #e3e6ec; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dn-f-carte h4 { margin: 0; }
.dn-f-carte .dn-seg { align-self: flex-start; }
.dn-f-sous { font-size: 0.9rem; color: #1d2a17; }
.dn-f-aide { margin: 0; color: var(--doux); font-size: 0.8125rem; font-style: italic; }
.dn-seg--i .dn-seg-b { display: inline-flex; align-items: center; gap: 6px; }
.dn-modale--champ .dn-opts { display: flex; flex-direction: column; gap: 8px; }
.dn-modale--champ .dn-opt-l { display: grid; grid-template-columns: 1fr 44px 34px; gap: 8px; align-items: center; }
.dn-modale--champ .dn-opt-l input[type=text], .dn-modale--champ .dn-opt-l input:not([type]) { height: 36px; border: 1px solid #e3e6ec; border-radius: 8px; background: #f4f5f8; padding: 0 10px; font: inherit; }
.dn-modale--champ .dn-opt-l input[type=color] { width: 44px; height: 30px; padding: 2px; border: 1px solid #e3e6ec; border-radius: 6px; background: #fff; cursor: pointer; }
.dn-modale--champ .dn-opt-x { width: 34px; height: 34px; border: 1px solid #e3e6ec; border-radius: 8px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.dn-opt-plus { align-self: flex-start; }
.dn-f-carte > input:not([type=color]), .dn-f-carte > select { height: 40px; border: 1px solid #e3e6ec; border-radius: 10px; background: #f4f5f8; padding: 0 12px; font: inherit; }

/* Fenêtre d'un champ, v2 : plus de contraste, plus d'air, moins de défilement. */
.dn-modale--champ { width: min(720px, 96vw); max-height: calc(100vh - 24px); }
.modale-fond:has(.dn-modale--champ) { padding: 12px; }
.dn-modale--champ .modale-tete { padding: 14px 22px; }
.dn-modale--champ .modale-tete h2 { font-size: 1.05rem; color: #2f3e8f; }
.dn-modale--champ .oa-form { gap: 16px; padding: 18px 24px; font-size: 0.875rem; }
.dn-modale--champ .oa-champ-form { gap: 6px; }
.dn-modale--champ .oa-champ-form > span, .dn-modale--champ .dn-f-carte h4 { font-size: 0.68rem; color: #4a5568; letter-spacing: 0.06em; }
.dn-modale--champ .oa-champ-form input:not([type=checkbox]):not([type=color]), .dn-modale--champ .oa-champ-form select,
.dn-modale--champ .dn-f-carte > input:not([type=color]), .dn-modale--champ .dn-f-carte > select,
.dn-modale--champ .dn-opt-l input:not([type=color]) { height: 38px; font-size: 0.875rem; color: #1a202c; background: #eef2f7; border: 1px solid #cfd7e3; border-radius: 8px; }
.dn-modale--champ input:focus, .dn-modale--champ select:focus { outline: none; border-color: #5b6ee1 !important; box-shadow: 0 0 0 3px rgba(91, 110, 225, 0.18); background: #fff !important; }
.dn-modale--champ .dn-f-carte { border-color: #dbe1ea; padding: 12px 14px; gap: 10px; }
.dn-modale--champ .dn-f-aide { color: #8a97ad; font-size: 0.78rem; }
.dn-modale--champ .dn-f-sous { font-size: 0.85rem; }
.dn-modale--champ .dn-seg { border-color: #cfd7e3; background: #eef2f7; border-radius: 8px; }
.dn-modale--champ .dn-seg-b { padding: 6px 12px; font-size: 0.8125rem; color: #4a5568; }
.dn-modale--champ .dn-seg-b + .dn-seg-b { border-left-color: #cfd7e3; }
.dn-modale--champ .dn-seg-b.is-actif { background: #5b6ee1; color: #fff; box-shadow: none; }
.dn-modale--champ .dn-coche-form { font-size: 0.875rem; }
.dn-modale--champ .dn-opt-l { grid-template-columns: 1fr 40px 32px; }
.dn-modale--champ .dn-opt-l input[type=color] { width: 40px; height: 28px; }
.dn-modale--champ .dn-opt-x { width: 32px; height: 32px; }
.dn-modale--champ .modale-pied { padding: 12px 22px; }
.dn-modale--champ .oa-form { max-height: none; flex: 1; min-height: 0; }
.dn-modale--champ .dn-seg-b { white-space: nowrap; }
.dn-modale--champ .dn-f-grille > .oa-champ-form .dn-seg { display: flex; width: 100%; }
.dn-modale--champ .dn-f-grille > .oa-champ-form .dn-seg-b { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
.dn-modale--champ .dn-opt-l { grid-template-columns: 1fr 1fr 40px 32px; }
.dn-modale--champ .dn-opt-l input[readonly] { color: #6b7790; cursor: default; }
.dn-coches { display: flex; gap: 24px; flex-wrap: wrap; }
.dn-pill[data-od] { cursor: pointer; }
.dn-pill[data-od]:hover { filter: brightness(0.95); box-shadow: 0 0 0 2px rgba(91, 110, 225, 0.25); }

.dn-calc { display: inline-flex; align-items: center; gap: 4px; color: #6d28d9; }
.dn-calc code { font-size: 0.75rem; background: #f3effd; padding: 1px 6px; border-radius: 6px; color: #5b21b6; }
.dn-calc-aide { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dn-calc-aide > span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #4a5568; margin-right: 4px; }
.dn-jeton { border: 1px solid #d7cff5; background: #f6f3fe; color: #5b21b6; border-radius: 6px; padding: 2px 7px; font: 600 0.75rem ui-monospace, Consolas, monospace; cursor: pointer; }
.dn-jeton:hover { background: #ebe4fd; }
.dn-jeton--f { border-color: #cfd7e3; background: #eef2f7; color: #334155; }
.dn-modale--champ textarea[data-dn-defexpr] { width: 100%; min-height: 72px; border: 1px solid #cfd7e3; border-radius: 8px; background: #eef2f7; padding: 8px 10px; font: 0.85rem ui-monospace, Consolas, monospace; color: #1a202c; box-sizing: border-box; }
.dn-calc-val { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 8px; background: #f6f3fe; color: #4c1d95; font-weight: 600; }

.dn-nbpj { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dn-nbpj svg { flex: none; }
.dn-sous { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: #f3effd; color: #6d28d9; font-weight: 700; font-size: 0.8rem; }
.dn-sous-champ { gap: 8px; }
.dn-sous-grille { overflow: auto; border: 1px solid #dbe1ea; border-radius: 10px; max-height: 300px; }
.dn-sous-grille table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; }
.dn-sous-grille th { position: sticky; top: 0; background: #f4f6fa; color: #4a5568; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; padding: 6px 8px; }
.dn-sous-grille td { border-top: 1px solid #eef1f5; padding: 4px 6px; vertical-align: middle; }
.dn-sous-grille td input:not([type=checkbox]), .dn-sous-grille td select { width: 100%; min-width: 70px; height: 30px; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 0 6px; font: inherit; }
.dn-sous-grille td input:hover, .dn-sous-grille td select:hover { border-color: #cfd7e3; }
.dn-sous-grille td input:focus, .dn-sous-grille td select:focus { outline: none; border-color: #5b6ee1; background: #fff; }
.dn-sous-c { width: 36px; text-align: center; }
.dn-sous-plus { align-self: flex-start; }
.dn-sous-grille td input:not([type=checkbox]) { min-width: 120px; }
.dn-sous-grille td select { min-width: 110px; }
.dn-sous-grille td { white-space: nowrap; }

.dn-vig { border-radius: 6px; object-fit: cover; background: #eef2f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aec0'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center / 60% no-repeat; flex: none; }
.dn-vig:not(.is-ok) { color: transparent; }
.dn-vigs { display: inline-flex; gap: 4px; align-items: center; }
.dn-vigs small { color: var(--doux); }
.dn-envoi { position: relative; border: 1px solid #dbe1ea; border-radius: 10px; padding: 8px 12px; overflow: hidden; font-size: 0.85rem; }
.dn-envoi span { position: relative; z-index: 1; display: inline-flex; gap: 6px; align-items: center; }
.dn-envoi i { position: absolute; left: 0; top: 0; bottom: 0; background: #ede9fe; transition: width 0.25s; }

/* Édition sur place (editeurs.js) */
.dn-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dn-cell--modifiable { cursor: cell; border-radius: 6px; }
.dn-cell--modifiable:hover { box-shadow: inset 0 0 0 1px #cfd7e3; }
.dn-cell--edition { overflow: visible; position: relative; z-index: 2; }
.pe-ed { font: inherit; font-size: 0.875rem; }
input.pe-ed, select.pe-ed, textarea.pe-ed { width: 100%; box-sizing: border-box; height: 32px; border: 2px solid #5b6ee1; border-radius: 6px; padding: 0 8px; background: #fff; color: #1a202c; }
textarea.pe-ed, .pe-md-src { height: auto; min-height: 64px; padding: 6px 8px; resize: vertical; }
input.pe-ed[type=checkbox] { width: 18px; height: 18px; }
input.pe-ed--couleur { padding: 2px; width: 60px; }
.pe-nombre { display: flex; align-items: center; gap: 4px; }
.pe-unite { font-style: normal; color: #6b7790; font-weight: 600; }
.pe-ed--note, .pe-ed--multi, .pe-ed--fichiers { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px; border: 2px solid #5b6ee1; border-radius: 8px; background: #fff; }
.pe-etoile { border: 0; background: none; padding: 0; cursor: pointer; color: #cbd5e0; }
.pe-etoile.on { color: #f39c12; }
.pe-etoile--zero { color: #a0aec0; margin-left: 4px; }
.pe-puce { border: 1px solid #cfd7e3; background: #f4f6fa; color: #4a5568; border-radius: 999px; padding: 2px 10px; font: 600 0.78rem inherit; cursor: pointer; }
.pe-puce.on { background: color-mix(in srgb, var(--pe-c) 15%, white); color: var(--pe-c); border-color: var(--pe-c); }
.pe-fichier { display: inline-flex; align-items: center; gap: 4px; background: #f4f6fa; border-radius: 6px; padding: 2px 6px; font-size: 0.78rem; }
.pe-fichier-x { border: 0; background: none; cursor: pointer; padding: 0; color: #a0aec0; }
.pe-fichier-plus { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; color: #5b6ee1; font-size: 0.78rem; font-weight: 600; }
.pe-ed--md { display: flex; gap: 4px; align-items: flex-start; width: 100%; }
.pe-md-src { flex: 1; border: 2px solid #5b6ee1; border-radius: 6px; font: 0.85rem ui-monospace, Consolas, monospace; }
.pe-md-apercu { flex: 1; border: 1px solid #cfd7e3; border-radius: 6px; padding: 6px 8px; background: #fff; max-height: 180px; overflow: auto; }
.pe-md-bascule { border: 1px solid #cfd7e3; background: #fff; border-radius: 6px; cursor: pointer; padding: 2px 4px; }
.dn-cell--edition .pe-ed--multi, .dn-cell--edition .pe-ed--fichiers, .dn-cell--edition .pe-ed--note { position: absolute; left: 0; top: 50%; transform: translateY(-50%); min-width: 240px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); z-index: 5; }
.dn-cell--edition .pe-ed--md { position: absolute; left: 0; top: 0; width: 360px; z-index: 5; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); border-radius: 8px; padding: 4px; }
.da-dt-cell.pe-edition { position: relative; overflow: visible; }
.da-dt-cell.pe-edition .pe-ed--multi, .da-dt-cell.pe-edition .pe-ed--fichiers, .da-dt-cell.pe-edition .pe-ed--note { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); min-width: 240px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); z-index: 5; }
.da-dt-cell.pe-edition .pe-ed--md { position: absolute; left: 4px; top: 4px; width: 360px; z-index: 5; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); border-radius: 8px; padding: 4px; }
.da-dt-cell.pe-modifiable { cursor: cell; }

/* Vues des tables (vues.js) */
.vu-onglets { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.vu-onglet { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #dde3ec; border-radius: 999px; background: #fff; color: #4a5568; font: 600 0.85rem inherit; cursor: pointer; }
.vu-onglet:hover { border-color: #b9c3d3; }
.vu-onglet.is-actif { background: #efeafd; border-color: #c9b8f7; color: #5b21b6; }
.vu-onglet.is-tire { opacity: 0.4; }
.vu-etoile { font-style: normal; color: #f39c12; font-size: 0.8rem; }
.vu-menu-btn { display: inline-flex; margin-right: -6px; border-radius: 50%; color: #8a94a6; }
.vu-menu-btn:hover { background: #e2e8f0; color: #1a202c; }
.vu-plus { width: 34px; height: 34px; border-radius: 50%; border: 1px dashed #b9c3d3; background: #fff; color: #5b21b6; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vu-menu { position: fixed; z-index: 1000; background: #fff; border: 1px solid #dde3ec; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); padding: 4px; min-width: 200px; }
.vu-menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font: 500 0.875rem inherit; color: #1a202c; cursor: pointer; text-align: left; }
.vu-menu button:hover { background: #f4f6fa; }
.vu-menu .vu-danger { color: #c53030; }
.vu-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.vu-genre { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px; border: 1px solid #dde3ec; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: #1a202c; }
.vu-genre:hover { border-color: #a78bfa; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.12); }
.vu-genre.is-off { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.vu-genre-pic { width: 42px; height: 42px; border-radius: 10px; background: #efeafd; color: #6d28d9; display: inline-flex; align-items: center; justify-content: center; }
.vu-genre small { color: #6b7790; font-size: 0.78rem; line-height: 1.35; }
.vu-liste { border: 1px solid #dde3ec; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
.vu-liste legend { font: 700 0.72rem inherit; text-transform: uppercase; letter-spacing: 0.04em; color: #4a5568; padding: 0 4px; }
.vu-coche { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; }
.dn-vue { flex: 1; min-height: 0; overflow: auto; }
.vu-vue { min-height: 0; }
.vu-note { color: #6b7790; font-size: 0.8rem; margin: 8px 0 0; }
.vu-ch { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; margin-top: 4px; }
.vu-ch span { color: #6b7790; }
.vu-ch b { font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Kanban */
.vu-kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.vu-col { flex: 0 0 270px; background: #f4f6fa; border-radius: 12px; display: flex; flex-direction: column; max-height: 70vh; }
.vu-col.is-cible { outline: 2px dashed var(--c); outline-offset: -2px; }
.vu-col header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 3px solid var(--c); }
.vu-col header i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.vu-col header b { flex: 1; font-size: 0.875rem; }
.vu-col header small { color: #6b7790; font-weight: 600; }
.vu-col-plus { border: 0; background: none; cursor: pointer; color: #6b7790; display: inline-flex; border-radius: 6px; }
.vu-col-plus:hover { background: #e2e8f0; color: #1a202c; }
.vu-col-corps { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 48px; }
.vu-carte { background: #fff; border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); border-left: 3px solid var(--c); cursor: pointer; }
.vu-carte[draggable="true"] { cursor: grab; }
.vu-carte.is-tire { opacity: 0.45; }
.vu-carte h4 { margin: 0; font-size: 0.9rem; }
/* Galerie */
.vu-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.vu-gcarte { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow 0.15s; }
.vu-gcarte:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); }
.vu-gimage { aspect-ratio: 4 / 3; background: #f4f6fa; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vu-gimage img { width: 100%; height: 100%; object-fit: cover; }
.vu-initiale { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font: 700 2.4rem inherit; }
.vu-gtexte { padding: 10px 12px; }
.vu-gtexte h4 { margin: 0 0 2px; font-size: 0.92rem; }
.vu-gtexte p { margin: 0 0 4px; color: #6b7790; font-size: 0.82rem; }
/* Calendrier */
.vu-cal-barre { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.vu-cal-barre h3 { margin: 0 0 0 8px; font-size: 1.05rem; }
.vu-cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid #e2e8f0; border-left: 1px solid #e2e8f0; }
.vu-cal-nom { padding: 6px 8px; font: 700 0.72rem inherit; text-transform: uppercase; color: #6b7790; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.vu-jour { min-height: 96px; padding: 4px; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vu-jour[data-vu-ajouter] { cursor: copy; }
.vu-jour.is-hors { background: #fafbfc; color: #a0aec0; }
.vu-jour.is-auj .vu-num { background: #6d28d9; color: #fff; border-radius: 999px; }
.vu-num { align-self: flex-end; font-size: 0.75rem; font-weight: 600; padding: 1px 6px; }
.vu-evt { border: 0; text-align: left; background: color-mix(in srgb, var(--c) 16%, white); color: color-mix(in srgb, var(--c) 75%, black); border-left: 3px solid var(--c); border-radius: 4px; padding: 2px 6px; font: 600 0.74rem inherit; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vu-evt-plus { font-size: 0.72rem; color: #6b7790; padding-left: 4px; }
/* Chronologie */
.vu-tl-barre-outils { display: inline-flex; border: 1px solid #dde3ec; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.vu-seg { border: 0; background: #fff; padding: 6px 12px; font: 600 0.8rem inherit; cursor: pointer; color: #4a5568; }
.vu-seg.is-actif { background: #efeafd; color: #5b21b6; }
.vu-tl-defil { overflow: auto; max-height: 70vh; border: 1px solid #e2e8f0; border-radius: 10px; }
.vu-tl-contenu { position: relative; width: max-content; min-width: 100%; }
.vu-tl-tete { display: flex; position: sticky; top: 0; z-index: 3; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.vu-tl-echelle { display: flex; }
.vu-tl-mois { flex: none; padding: 6px 8px; font: 600 0.75rem inherit; color: #4a5568; border-right: 1px solid #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.vu-tl-couloir { display: flex; border-bottom: 1px solid #edf1f6; }
.vu-tl-nom { flex: 0 0 160px; position: sticky; left: 0; z-index: 2; background: #fff; padding: 10px; font: 600 0.82rem inherit; display: flex; align-items: flex-start; gap: 6px; border-right: 1px solid #e2e8f0; box-sizing: border-box; }
.vu-tl-nom i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-top: 4px; }
.vu-tl-coin { background: #f8fafc; }
.vu-tl-piste { position: relative; flex: none; }
.vu-tl-barre { position: absolute; height: 26px; border: 0; border-radius: 6px; background: var(--c); color: #fff; font: 600 0.75rem inherit; padding: 0 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15); }
.vu-tl-auj { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #e53e3e; z-index: 1; pointer-events: none; }
.vu-tl-contenu.avec-couloirs .vu-tl-auj { left: calc(160px + var(--x)); }
@media (max-width: 640px) {
  .vu-col { flex-basis: 82vw; }
  .vu-jour { min-height: 64px; }
  .vu-evt { font-size: 0.68rem; padding: 1px 3px; }
  .vu-tl-nom { flex-basis: 96px; }
  .vu-tl-contenu.avec-couloirs .vu-tl-auj { left: calc(96px + var(--x)); }
}
/* Vues V3 à V5 (vues.js) */
.vu-pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.vu-note--alerte { background: #fff8e6; border: 1px solid #f3d27a; color: #7a5600; border-radius: 8px; padding: 8px 10px; margin: 4px 0 12px; }
.vu-coche--bloc { margin: 4px 0 8px; font-weight: 600; }
.vu-detail { margin-top: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.vu-detail-tete { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #edf1f6; }
.vu-detail-tete small { color: #6b7790; flex: 1; }
.vu-detail-x { border: 0; background: none; cursor: pointer; color: #6b7790; display: inline-flex; }
.vu-detail-corps { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; max-height: 220px; overflow: auto; }
.vu-detail-ligne { border: 1px solid #dde3ec; background: #f8fafc; border-radius: 999px; padding: 4px 12px; font: 500 0.82rem inherit; cursor: pointer; }
.vu-detail-ligne:hover { border-color: #a78bfa; background: #f5f3ff; }
.vu-detail > .btn { margin: 10px 12px; }
.vu-cr-defil, .vu-rp-defil { overflow: auto; max-height: 60vh; border: 1px solid #e2e8f0; border-radius: 10px; }
.vu-cr, .vu-rp { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.vu-cr th, .vu-cr td, .vu-rp th, .vu-rp td { padding: 7px 12px; border-bottom: 1px solid #edf1f6; text-align: left; white-space: nowrap; }
.vu-cr thead th, .vu-rp thead th { position: sticky; top: 0; background: #f8fafc; font: 700 0.72rem inherit; text-transform: uppercase; color: #4a5568; z-index: 1; }
.vu-cr tbody th { font-weight: 600; background: #fff; position: sticky; left: 0; }
.vu-cr-v { text-align: right !important; cursor: pointer; font-variant-numeric: tabular-nums; }
.vu-cr-v:hover { background: #f5f3ff; }
.vu-cr-v.is-vide { cursor: default; background: none; }
.vu-cr-tot { font-weight: 700; background: #f8fafc; }
.vu-cr-pied th, .vu-cr-pied td { background: #f4f6fa; font-weight: 700; }
.vu-gr-defil { overflow-x: auto; }
.vu-svg { display: block; max-width: none; }
.vu-svg [data-vu-detail] { cursor: pointer; }
.vu-svg [data-vu-detail]:hover { opacity: 0.85; }
.vu-svg-grille { stroke: #edf1f6; }
.vu-svg-lib { font-size: 11px; fill: #6b7790; }
.vu-svg-val { font-size: 11px; fill: #1a202c; font-weight: 600; }
.vu-svg-tot { font-size: 22px; font-weight: 700; fill: #1a202c; }
.vu-svg-ligne { fill: none; stroke: #6d28d9; stroke-width: 2.5; }
.vu-gr-rond { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.vu-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.vu-legende li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; font-size: 0.85rem; cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.vu-legende li:hover { background: #f4f6fa; }
.vu-legende i { width: 12px; height: 12px; border-radius: 3px; }
.vu-legende small { color: #6b7790; }
.vu-ged { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.vu-ged-groupe { margin-bottom: 16px; }
.vu-ged-groupe h4 { margin: 0 0 8px; font-size: 0.9rem; }
.vu-ged-groupe h4 small { color: #6b7790; font-weight: 600; }
.vu-fic { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.vu-fic-image { width: 100%; aspect-ratio: 4 / 3; border: 0; background: #f4f6fa; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7790; overflow: hidden; padding: 0; }
.vu-fic-image img { width: 100%; height: 100%; object-fit: cover; }
.vu-fic-texte { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vu-fic-texte b { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vu-fic-texte small { color: #6b7790; font-size: 0.74rem; }
.vu-fic-ligne { border: 0; background: none; padding: 0; color: #5b21b6; font: 600 0.74rem inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 2px; }
.vu-carte-map { height: 62vh; min-height: 320px; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; z-index: 0; }
.vu-bulle { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.vu-bulle-btn { margin-top: 8px; height: 30px; }
.vu-rp-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vu-rp-filtres .vu-seg { border: 1px solid #dde3ec; border-radius: 999px; }
.vu-rp tbody tr { cursor: pointer; }
.vu-rp tbody tr:hover, .vu-rp tbody tr.is-sel { background: #f5f3ff; }
.vu-rp-sc { text-align: right !important; font-variant-numeric: tabular-nums; }
.vu-pastille { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 600 0.74rem inherit; background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 80%, black); }
.vu-rp-det { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.vu-rp-det th, .vu-rp-det td { padding: 6px 12px; border-bottom: 1px solid #edf1f6; text-align: left; }
/* Rapprochement : la vue tient dans la zone, liste à gauche, détail à droite (pas de page qui défile). */
.dn-vue:has(.vu-vue--rapprochement), .da-vue:has(.vu-vue--rapprochement) { overflow: hidden; display: flex; flex-direction: column; }
.vu-vue--rapprochement { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vu-rp-corps { flex: 1; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 12px; }
.vu-rp-corps .vu-rp-defil { max-height: none; min-height: 0; }
.vu-rp-defil:focus-visible { outline: 2px solid #a78bfa; outline-offset: 1px; }
.vu-rp td b { font-weight: 600; }
.vu-rp thead th.vu-rp-th { cursor: pointer; user-select: none; }
.vu-rp thead th.vu-rp-th:hover { color: #5b21b6; }
.vu-rp thead th[aria-sort="ascending"], .vu-rp thead th[aria-sort="descending"] { color: #5b21b6; }
.vu-rp thead th .ms { vertical-align: -2px; margin-left: 2px; }
.vu-rp td { font-variant-numeric: tabular-nums; }
.vu-rp td.vu-rp-ecart { color: #b45309; }
.vu-rp td.vu-rp-ecart small { color: #92400e; opacity: 0.8; }
.vu-rp tbody tr.is-sel { box-shadow: inset 3px 0 0 #7c3aed; }
.vu-rp-panneau { min-height: 0; overflow: auto; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; display: flex; flex-direction: column; }
.vu-rp-panneau > .btn { margin: 10px 12px; align-self: flex-start; }
.vu-rp-panneau .vu-note { margin: 10px 12px 0; }
.vu-rp-invite { margin: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #6b7790; text-align: center; font-size: 0.85rem; }
.vu-rp-det-defil { overflow-x: auto; }
.vu-rp-det thead th { font: 700 0.72rem inherit; color: #4a5568; background: #f8fafc; white-space: nowrap; }
.vu-rp-det tbody th { color: #4a5568; font-weight: 600; white-space: nowrap; }
.vu-rp-det td.vu-rp-ecart { color: #b45309; background: #fff7ed; }
.vu-rp-det td.vu-rp-ok { color: #0f766e; }
@media (max-width: 900px) {
  .dn-vue:has(.vu-vue--rapprochement), .da-vue:has(.vu-vue--rapprochement) { overflow: auto; display: block; }
  .vu-rp-corps { grid-template-columns: minmax(0, 1fr); }
  .vu-rp-corps .vu-rp-defil { max-height: 55vh; }
}
.vu-regles { border: 1px solid #dde3ec; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.vu-regles legend { font: 700 0.72rem inherit; text-transform: uppercase; letter-spacing: 0.04em; color: #4a5568; padding: 0 4px; }
.vu-regle { display: grid; grid-template-columns: 1fr 1fr 1fr 90px 70px 28px; gap: 6px; align-items: center; }
.vu-regle select, .vu-regle input { height: 34px; border: 1px solid #cfd7e3; border-radius: 6px; padding: 0 6px; font: inherit; font-size: 0.82rem; min-width: 0; }
.vu-regle-x { border: 0; background: none; cursor: pointer; color: #a0aec0; }
.vu-regles > .btn { align-self: flex-start; }
@media (max-width: 640px) { .vu-regle { grid-template-columns: 1fr 1fr; } .vu-carte-map { height: 55vh; } }

/* Pièces de la fiche : retour visible de chaque action, zone de dépôt */
@keyframes dn-tourne { to { transform: rotate(360deg); } }
.ms.dn-tourne { animation: dn-tourne 0.9s linear infinite; display: inline-block; }
.dn-piece.is-encours { opacity: 0.65; }
.dn-piece-x { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #feb2b2; border-radius: 8px; padding: 2px 8px; font: 600 0.78rem inherit; color: #c53030; background: #fff5f5; white-space: nowrap; }
.dn-piece-x.is-confirmer { background: #e53e3e; border-color: #e53e3e; color: #fff; cursor: pointer; }
.dn-piece-x.is-encours { cursor: progress; }
.dn-pieces[data-dn-depot] { border: 2px dashed transparent; border-radius: 12px; transition: border-color 0.15s, background 0.15s; }
.dn-pieces.is-depot { border-color: #8b5cf6; background: #f5f3ff; }
.dn-depot-aide { display: inline-flex; align-items: center; gap: 4px; color: #8a94a6; font-size: 0.8rem; }

/* Kanban au doigt, visionneuse de fichiers (vues.js) */
.vu-carte[draggable="true"] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.vu-fantome { position: fixed; z-index: 3000; pointer-events: none; margin: 0; transform: rotate(2deg) scale(1.03); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.28); opacity: 0.96; }
@keyframes vu-tourne { to { transform: rotate(360deg); } }
.ms.vu-tourne { animation: vu-tourne 0.9s linear infinite; display: inline-block; }
.vu-apercu-fond { position: fixed; inset: 0; z-index: 2500; background: rgba(15, 23, 42, 0.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.vu-apercu { background: #fff; border-radius: 14px; width: min(1100px, 100%); height: min(90vh, 900px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.vu-apercu-tete { display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #e2e8f0; }
.vu-apercu-titre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.vu-apercu-titre > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.vu-apercu-titre b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vu-apercu-titre small { color: #6b7790; font-size: 0.78rem; }
.vu-apercu-btn { border: 0; background: none; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; color: #4a5568; display: inline-flex; align-items: center; justify-content: center; }
.vu-apercu-btn:hover:not(:disabled) { background: #f1f5f9; color: #1a202c; }
.vu-apercu-btn:disabled { opacity: 0.35; cursor: default; }
.vu-apercu-corps { flex: 1; min-height: 0; background: #f4f6fa; display: flex; align-items: center; justify-content: center; overflow: auto; }
.vu-apercu-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vu-apercu-pdf { width: 100%; height: 100%; border: 0; background: #fff; }
.vu-apercu-texte { align-self: stretch; width: 100%; margin: 0; padding: 16px; background: #fff; font: 0.82rem ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow: auto; }
.vu-apercu-msg { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #4a5568; text-align: center; padding: 24px; }
.vu-apercu-msg--ko { color: #c53030; }
@media (max-width: 640px) { .vu-apercu-fond { padding: 0; } .vu-apercu { height: 100%; border-radius: 0; } }

/* Vue Fichiers (GED) : liste, grille, visionneuse, métadonnées (vues.js) */
.dn-vue:has(.vu-vue--ged), .da-vue:has(.vu-vue--ged) { overflow: hidden; display: flex; flex-direction: column; }
.vu-vue--ged { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vg { display: flex; flex-direction: column; flex: 1; min-height: 480px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; overflow: hidden; }
.vg-barre { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #edf1f6; flex-wrap: wrap; }
.vg-titre { display: inline-flex; align-items: center; gap: 8px; color: #334155; }
.vg-titre b { font-size: 1rem; }
.vg-nb { font-style: normal; background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; font-weight: 700; }
.vg-cherche { flex: 1; min-width: 180px; max-width: 380px; display: flex; align-items: center; gap: 6px; border: 1px solid #dde3ec; border-radius: 10px; padding: 0 10px; background: #f8fafc; color: #8a94a6; }
.vg-cherche input { flex: 1; border: 0; background: none; height: 36px; font: inherit; color: #1a202c; outline: none; min-width: 0; }
.vg-ajouter { height: 38px; }
.vg-seg { display: inline-flex; border: 1px solid #dde3ec; border-radius: 10px; overflow: hidden; margin-left: auto; }
.vg-seg button { border: 0; background: #fff; width: 40px; height: 36px; cursor: pointer; color: #64748b; display: inline-flex; align-items: center; justify-content: center; }
.vg-seg button.is-actif { background: #6366f1; color: #fff; }
.vg-pastilles { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid #edf1f6; }
.vg-pastille { --c: #6366f1; border: 1px solid color-mix(in srgb, var(--c) 35%, white); background: color-mix(in srgb, var(--c) 8%, white); color: color-mix(in srgb, var(--c) 85%, black); border-radius: 999px; padding: 4px 12px; font: 600 0.8rem inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vg-pastille i { font-style: normal; background: color-mix(in srgb, var(--c) 18%, white); border-radius: 999px; padding: 0 7px; font-size: 0.72rem; }
.vg-pastille.is-actif { background: var(--c); border-color: var(--c); color: #fff; }
.vg-pastille.is-actif i { background: rgba(255, 255, 255, 0.25); }
.vg-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.vg-corps.avec-vis { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); }
.vg-corps.avec-vis.avec-meta { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) 340px; }
.vg-liste { overflow: auto; padding: 12px 14px; background: #f8fafc; min-width: 0; }
.vg-groupe { margin-bottom: 14px; }
.vg-groupe-tete { --c: #6a7494; display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-radius: 10px; margin-bottom: 8px; background: color-mix(in srgb, var(--c) 11%, white); color: color-mix(in srgb, var(--c) 80%, black); }
.vg-groupe-tete b { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.vg-groupe-tete i { font-style: normal; font-size: 0.74rem; font-weight: 700; background: rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 0 8px; }
.vg-lignes { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.vg-ligne, .vg-riche { display: grid; align-items: center; gap: 12px; padding: 9px 10px 9px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; position: relative; outline: none; }
.vg-ligne { grid-template-columns: 36px minmax(0, 1fr) auto 32px; }
.vg-riche { grid-template-columns: 44px minmax(0, 1fr) auto 32px; padding: 11px 10px 11px 12px; }
.vg-lignes > :last-child { border-bottom: 0; }
.vg-ligne:hover, .vg-riche:hover { background: #f8fafc; }
.vg-ligne.is-sel, .vg-riche.is-sel { background: #eef2ff; box-shadow: inset 3px 0 0 #6366f1; }
.vg-ligne:focus-visible, .vg-riche:focus-visible, .vg-carte:focus-visible { box-shadow: inset 0 0 0 2px #6366f1; }
.vg-nom { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.vg-nom b, .vg-riche-t b { font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-nom i { font-style: normal; color: #94a3b8; font-size: 0.72rem; font-weight: 600; }
.vg-ref { color: #64748b; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; display: inline-flex; align-items: center; gap: 4px; }
.vg-riche-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vg-riche-t small { color: #64748b; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-infos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.vg-info { display: inline-flex; align-items: center; gap: 4px; color: #475569; font-size: 0.78rem; }
.vg-info .ms { color: #94a3b8; }
.vg-badge { --c: #6366f1; border-radius: 999px; padding: 3px 10px; font: 600 0.74rem inherit; background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 80%, black); white-space: nowrap; }
.vg-menu-btn { border: 0; background: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; }
.vg-menu-btn:hover { background: #e2e8f0; color: #1e293b; }
.vg-pic { --f: #64748b; width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--f) 12%, white); color: var(--f); flex: none; overflow: hidden; }
.vg-riche > .vg-pic { width: 44px; height: 44px; }
.vg-pic--pdf { --f: #dc2626; } .vg-pic--image { --f: #7c3aed; } .vg-pic--tableur { --f: #16a34a; } .vg-pic--texte { --f: #2563eb; }
.vg-pic--diapo { --f: #ea580c; } .vg-pic--archive { --f: #ca8a04; } .vg-pic--video { --f: #db2777; } .vg-pic--audio { --f: #0891b2; }
.vg-pic--vig img { width: 100%; height: 100%; object-fit: cover; }
.vg-pic--grand { width: 100%; height: 100%; border-radius: 0; flex-direction: column; gap: 4px; background: transparent; }
.vg-pic--grand small { font-weight: 700; font-size: 0.78rem; color: color-mix(in srgb, var(--f) 70%, #475569); letter-spacing: 0.04em; }
.vg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.vg-carte { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; cursor: pointer; outline: none; transition: box-shadow 0.15s, border-color 0.15s; }
.vg-carte:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.09); }
.vg-carte.is-sel { border-color: #6366f1; box-shadow: 0 0 0 2px #c7d2fe; }
.vg-carte-pic { aspect-ratio: 4 / 3; background: #f8fafc; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vg-carte-pic img { width: 100%; height: 100%; object-fit: cover; }
.vg-carte-t { padding: 9px 12px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vg-carte-t b { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-carte .vg-menu-btn { position: absolute; top: 6px; right: 6px; background: rgba(255, 255, 255, 0.9); }
.vg-plus { border: 0; background: none; color: #4f46e5; font: 600 0.82rem inherit; cursor: pointer; padding: 8px 4px 0; display: inline-flex; align-items: center; gap: 4px; }
.vg-vis { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid #e2e8f0; background: #fff; }
.vg-vis:fullscreen { width: 100vw; height: 100vh; }
.vg-vis-tete { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid #edf1f6; min-height: 50px; }
.vg-vis-nom { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0 6px; }
.vg-vis-nom .vg-pic { width: 28px; height: 28px; }
.vg-vis-nom b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.92rem; }
.vg-vis-pages { color: #64748b; font-size: 0.8rem; font-variant-numeric: tabular-nums; padding: 0 8px; white-space: nowrap; }
.vg-ib { border: 0; background: none; min-width: 34px; height: 34px; border-radius: 8px; cursor: pointer; color: #475569; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.vg-ib:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.vg-ib:disabled { opacity: 0.35; cursor: default; }
.vg-ib.is-actif { background: #eef2ff; color: #4338ca; }
.vg-ib--txt { padding: 0 10px; font: 600 0.8rem inherit; border: 1px solid #e2e8f0; }
.vg-corps.avec-meta .vg-ib--txt span:not(.ms) { display: none; }
.vg-corps.avec-meta .vg-ib--txt { padding: 0 8px; }
.vg-vis-outils { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid #edf1f6; background: #fafbfc; }
.vg-vis-outils[hidden] { display: none; }
.vg-zoom { min-width: 92px; text-align: center; font: 600 0.8rem inherit; color: #334155; font-variant-numeric: tabular-nums; }
.vg-vis-corps { flex: 1; min-height: 0; overflow: auto; background: #3b3f47; padding: 16px; }
.vg-pdf canvas { display: block; margin: 0 auto 16px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.vg-img { min-height: 100%; display: flex; align-items: center; justify-content: center; }
.vg-img img { display: block; max-width: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); background: #fff; }
.vg-img img.is-page { max-width: 100%; max-height: calc(100% - 4px); }
.vg-texte { margin: 0; padding: 18px; background: #fff; border-radius: 6px; font: 0.82rem ui-monospace, Consolas, monospace; white-space: pre-wrap; min-height: 100%; }
.vg-vis-msg { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #e2e8f0; text-align: center; }
.vg-vis-msg .vg-pic--grand { width: 120px; height: 120px; background: rgba(255, 255, 255, 0.08); border-radius: 16px; }
.vg-vis-msg--ko { color: #fecaca; }
.vg-meta { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid #e2e8f0; background: #fff; }
.vg-meta-onglets { display: flex; align-items: center; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid #edf1f6; }
.vg-meta-onglets button { border: 0; background: none; padding: 10px 10px; font: 600 0.82rem inherit; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; }
.vg-meta-onglets button.is-actif { color: #4338ca; border-bottom-color: #6366f1; }
.vg-meta-onglets .vg-meta-x { margin-left: auto; }
.vg-meta-corps { flex: 1; overflow: auto; padding: 12px 16px 18px; }
.vg-meta-corps section { margin-bottom: 18px; }
.vg-meta-corps h4 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: 0.92rem; color: #0f172a; }
.vg-lien { border: 0; background: none; color: #4f46e5; font: 600 0.76rem inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.vg-m { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #edf1f6; font-size: 0.84rem; }
.vg-m > span { color: #64748b; }
.vg-m > b { font-weight: 500; color: #1e293b; min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vg-m-modif { cursor: pointer; border-radius: 6px; padding: 3px 6px; margin: -3px -6px; }
.vg-m-modif:hover { background: #f1f5f9; }
.vg-m-modif > .ms:last-child { color: #cbd5e1; margin-left: auto; }
.vg-m-modif:hover > .ms:last-child { color: #6366f1; }
.vg-m-vide { color: #94a3b8; font-style: italic; font-weight: 400; }
.vg-m.is-edition { align-items: start; }
.vg-m-ed { position: relative; }
.vg-m-ed .pe-ed--multi, .vg-m-ed .pe-ed--note, .vg-m-ed .pe-ed--md { position: static; box-shadow: none; }
.vg-attente { display: flex; align-items: center; gap: 8px; color: #64748b; }
.vg-activite { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #e0e7ff; }
.vg-activite li { position: relative; padding: 0 0 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.vg-activite li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #6366f1; box-shadow: 0 0 0 3px #eef2ff; }
.vg-activite b { font-size: 0.84rem; }
.vg-activite small { color: #64748b; font-size: 0.76rem; }
.vg-activite span { color: #334155; font-size: 0.8rem; }
@media (max-width: 1100px) { .vg-corps.avec-vis.avec-meta { grid-template-columns: minmax(0, 1fr) 320px; } .vg-corps.avec-vis.avec-meta .vg-liste { display: none; } }
@media (max-width: 760px) {
  .vg { height: calc(100vh - 170px); border-radius: 10px; }
  .vg-corps.avec-vis, .vg-corps.avec-vis.avec-meta { grid-template-columns: minmax(0, 1fr); }
  .vg-corps.avec-vis .vg-liste { display: none; }
  .vg-corps.avec-meta .vg-vis { display: none; }
  .vg-ib--txt span:not(.ms) { display: none; }
  .vg-ref { display: none; }
}

/* Éditeur de PDF (editeur-pdf.js : EmbedPDF + pdf-lib) */
.pe-pdf { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #fff; position: relative; }
.pe-pdf-barre { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.pe-pdf-barre > b { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; color: #1e293b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.pe-pdf-espace { flex: 1; }
.pe-pdf-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid #dde3ec; border-radius: 10px; background: #fff; color: #334155; font: 600 0.84rem inherit; cursor: pointer; }
.pe-pdf-btn:hover:not(:disabled) { background: #f8fafc; border-color: #c7d2fe; }
.pe-pdf-btn:disabled { opacity: 0.5; cursor: progress; }
.pe-pdf-btn--plein { background: #6366f1; border-color: #6366f1; color: #fff; }
.pe-pdf-btn--plein:hover:not(:disabled) { background: #4f46e5; border-color: #4f46e5; }
.pe-pdf-corps { flex: 1; min-height: 0; display: flex; position: relative; }
.pe-pdf-vue { flex: 1; min-width: 0; height: 100%; position: relative; }
.pe-pdf-vue > * { height: 100%; }
.pe-pdf-pages { width: 260px; flex: none; border-left: 1px solid #e2e8f0; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; padding: 10px; overflow: auto; }
.pe-pdf-pages[hidden] { display: none; }
.pe-pages-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pe-page { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: grab; }
.pe-page.is-tire { opacity: 0.4; }
.pe-page canvas { max-width: 100%; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15); background: #fff; min-height: 60px; }
.pe-page > span { font-size: 0.74rem; color: #64748b; font-weight: 600; }
.pe-page-actes { display: flex; gap: 4px; }
.pe-page-actes button { border: 1px solid #e2e8f0; background: #fff; border-radius: 6px; width: 28px; height: 26px; cursor: pointer; color: #475569; display: inline-flex; align-items: center; justify-content: center; }
.pe-page-actes button:hover { color: #c53030; border-color: #feb2b2; }
.pe-pages-ins { justify-content: center; }
.pe-pages-attente { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 0.84rem; }
.pe-pdf-voile { position: absolute; inset: 0; z-index: 5; background: rgba(255, 255, 255, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #334155; text-align: center; padding: 20px; }
.pe-pdf-voile[hidden] { display: none; }
.pe-pdf-toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; background: #1e293b; color: #fff; border-radius: 10px; padding: 8px 14px; font-size: 0.84rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
@media (max-width: 760px) { .pe-pdf-btn span { display: none; } .pe-pdf-pages { position: absolute; right: 0; top: 0; bottom: 0; z-index: 4; width: 220px; } }

/* Versions des pièces (vue Fichiers) et édition */
.vg-vis.en-edition > .vg-vis-tete, .vg-vis.en-edition > .vg-vis-outils, .vg-vis.en-edition > .vg-vis-corps { display: none; }
.vg-edition { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vg-ib--modifier { border-color: #c7d2fe; color: #4338ca; }
.vg-vis-version { display: inline-flex; align-items: center; gap: 6px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; border-radius: 999px; padding: 2px 4px 2px 10px; font: 600 0.76rem inherit; white-space: nowrap; }
.vg-vis-version button { border: 0; background: #ffedd5; color: #9a3412; border-radius: 999px; padding: 2px 8px; font: 600 0.72rem inherit; cursor: pointer; }
.vg-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vg-versions li { border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.vg-versions li.is-courante { border-color: #bbf7d0; background: #f0fdf4; }
.vg-versions li.is-vue { box-shadow: inset 3px 0 0 #6366f1; }
.vg-versions li > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vg-versions small { color: #64748b; font-size: 0.76rem; }
.vg-versions-note { font-size: 0.8rem; color: #334155; font-style: italic; }
.vg-versions-actes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.vg-versions-actes button { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; padding: 3px 8px; font: 600 0.74rem inherit; color: #334155; cursor: pointer; }
.vg-versions-actes button:hover { border-color: #c7d2fe; color: #4338ca; }
.vg-versions-actes button.is-confirmer { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.vg-versions-encours { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; color: #9a3412; }
/* Pendant l'édition d'un PDF, l'éditeur prend toute la largeur de la vue (liste et panneau masqués). */
.vg-corps.avec-vis:has(.vg-vis.en-edition) { grid-template-columns: minmax(0, 1fr) !important; }
.vg-corps:has(.vg-vis.en-edition) > .vg-liste, .vg-corps:has(.vg-vis.en-edition) > .vg-meta { display: none !important; }
.vg-corps:has(.vg-vis.en-edition) > .vg-vis { display: flex !important; }
/* Trois onglets dans un panneau étroit : ils se resserrent, puis défilent, sans couper le texte. */
.vg-meta-onglets { overflow-x: auto; scrollbar-width: none; }
.vg-meta-onglets button { padding: 10px 7px; gap: 4px; white-space: nowrap; flex: none; }
.vg-edition--plein { position: fixed; inset: 0; z-index: 400; background: #fff; display: flex; flex-direction: column; }
/* Visionneuse étroite (panneau, PWA, téléphone) : les boutons à libellé passent en icône seule. */
.vg-vis { container-type: inline-size; }
@container (max-width: 680px) {
  .vg-vis-tete .vg-ib--txt span:not(.ms) { display: none; }
  .vg-vis-tete .vg-ib--txt { padding: 0 8px; }
  .vg-vis-tete .vg-vis-pages { display: none; }
}
/* Contenu indexé (PLAN_CONTENU_INDEXE.md) */
.dn-ci { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; background: #ecfdf5; color: #0f766e; white-space: nowrap; }
.dn-ci--en_cours { background: #eff6ff; color: #1d4ed8; }
.dn-ci--sans_texte { background: #f1f5f9; color: #64748b; }
.dn-ci-fiche { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 8px 10px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; }
.dn-ci-extrait { margin: 0; font-size: 0.82rem; color: #475569; line-height: 1.45; font-style: italic; }
.vg-trouve { display: block; margin-top: 3px; font-size: 0.76rem; color: #0f766e; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vg-trouve b { background: #fef08a; color: #1e293b; font-weight: 700; border-radius: 3px; padding: 0 2px; }
.vg-cherche-etat { display: inline-flex; align-items: center; color: #0f766e; flex: none; }
.vg-nom:has(.vg-trouve) { flex-wrap: wrap; row-gap: 2px; }
.vg-nom .vg-trouve { flex-basis: 100%; margin-top: 0; }

/* Vue Widget (widget.js) : le langage de composants, rendu dans la vue. */
.vu-vue--widget { overflow: auto; }
.vw-racine { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vw-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vw-row { display: flex; flex-direction: row; gap: 8px; min-width: 0; align-items: center; }
.vw-grid { display: grid; gap: 12px; }
.vw-repeat { display: flex; flex-direction: column; gap: 8px; }
.vw-repeat--h { flex-direction: row; }
.vw-grid > .vw-repeat, .vw-row > .vw-repeat { display: contents; }
.vw-card { background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 12px; min-width: 0; }
.vw-box { min-width: 0; }
.vw-spacer { flex: 1; }
.vw-divider { border: 0; border-top: 1px solid #e3e8f0; margin: 4px 0; width: 100%; }
.vw-cliquable { cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .1s; }
.vw-card.vw-cliquable:hover, .vw-kpi.vw-cliquable:hover { border-color: #b9c6dd; box-shadow: 0 3px 12px rgba(30, 50, 90, .08); }
.vw-cliquable:focus-visible { outline: 2px solid #5b7cc7; outline-offset: 2px; }
.vw-text { min-width: 0; overflow-wrap: anywhere; }
.vw-text--xs { font-size: .72rem; } .vw-text--sm { font-size: .82rem; } .vw-text--md { font-size: .95rem; }
.vw-text--lg { font-size: 1.12rem; } .vw-text--xl { font-size: 1.35rem; font-weight: 700; } .vw-text--2xl { font-size: 1.7rem; font-weight: 700; }
.vw-icon { display: inline-flex; color: #5b6b85; }
.vw-badge { --c: #6a7494; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.vw-kpi { --c: #2563eb; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 14px 16px; min-width: 0; }
.vw-kpi-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; flex: none;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.vw-kpi > div { display: flex; flex-direction: column; min-width: 0; }
.vw-kpi small { color: #6a7494; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-kpi b { font-size: 1.45rem; color: #1f2a44; line-height: 1.2; overflow-wrap: anywhere; }
.vw-kpi em { font-style: normal; color: #8a94ab; font-size: .76rem; }
.vw-progress { position: relative; height: 10px; border-radius: 999px; background: #edf1f7; overflow: hidden; }
.vw-progress i { display: block; height: 100%; border-radius: 999px; }
.vw-progress span { position: absolute; right: 6px; top: -3px; font-size: .7rem; font-weight: 700; color: #1f2a44; }
.vw-barres h4 { margin: 0 0 10px; font-size: .9rem; color: #1f2a44; }
.vw-barre { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; align-items: center; gap: 10px; padding: 3px 0; font-size: .84rem; }
.vw-barre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3d4a63; }
.vw-barre i { height: 12px; background: #f0f3f8; border-radius: 6px; overflow: hidden; }
.vw-barre i b { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.vw-barre em { font-style: normal; font-weight: 700; color: #1f2a44; font-variant-numeric: tabular-nums; }
.vw-image { max-width: 100%; display: block; object-fit: cover; }
.vw-image--piece img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.vw-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; overflow: hidden; flex: none; }
.vw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vw-link { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.vw-list { margin: 0; padding-left: 20px; }
.vw-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.vw-btn--primary { background: #2563eb; color: #fff; } .vw-btn--primary:hover { background: #1d4ed8; }
.vw-btn--success { background: #16a34a; color: #fff; } .vw-btn--danger { background: #dc2626; color: #fff; }
.vw-btn--secondary { background: #fff; color: #1f2a44; border-color: #cfd8e6; } .vw-btn--ghost { background: transparent; color: #2563eb; }
.vw-btn:disabled { opacity: .5; cursor: not-allowed; }
.vw-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vw-champ-lib { font-size: .78rem; font-weight: 600; color: #5b6b85; }
.vw-champ input, .vw-champ select, .vw-champ textarea { font: inherit; padding: 7px 10px; border: 1px solid #cfd8e6; border-radius: 8px; background: #fff; min-width: 0; }
.vw-coche { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.vw-inconnu { padding: 6px 10px; border: 1px dashed #e0a14a; border-radius: 8px; color: #8a5a00; background: #fff8ec; font-size: .8rem; }
.oa-champ-form.vu-dsl textarea, .vu-dsl textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; line-height: 1.45; min-height: 260px; white-space: pre; overflow: auto; tab-size: 2; }
.vu-dsl-modele { margin: -4px 0 10px; }
.vu-aide { border: 1px solid #e3e8f0; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: .84rem; }
.vu-aide summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 600; color: #3d4a63; }
.vu-aide h5 { margin: 12px 0 6px; font-size: .8rem; color: #5b6b85; text-transform: uppercase; letter-spacing: .03em; }
.vu-aide code { background: #f2f5fa; border-radius: 5px; padding: 1px 5px; font-size: .78rem; }
.vu-aide-vars { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.vu-aide-champs { border-collapse: collapse; width: 100%; } .vu-aide-champs td { padding: 3px 8px 3px 0; border-bottom: 1px solid #f0f3f8; }
.vu-aide-pre { white-space: pre-wrap; background: #f7f9fc; border-radius: 8px; padding: 8px 10px; font-size: .76rem; margin: 0; }
@media (max-width: 640px) { .vw-barre { grid-template-columns: minmax(60px, 34%) 1fr auto; } .vw-kpi b { font-size: 1.2rem; } }

/* Vue Tableur (vue-tableur.js) : grille virtualisée, barre d'outils, barre de formule, feuilles. */
.vu-vue--tableur { overflow: visible; height: 100%; }
.tb-hote { height: 100%; min-height: 0; }
.tb { display: flex; flex-direction: column; height: 100%; min-height: 340px; border: 1px solid #dbe1ea; border-radius: 12px; background: #fff; overflow: hidden; outline: none; position: relative; font-size: .84rem; }
.tb:focus-visible { box-shadow: 0 0 0 2px #c7d2fe; }
.tb-msg { margin: auto; display: flex; align-items: center; gap: 10px; color: #5b6b85; padding: 30px; }
.tb-msg .ms { animation: tb-tourne 1s linear infinite; }
.tb-msg--ko .ms { animation: none; color: #dc2626; }
@keyframes tb-tourne { to { transform: rotate(360deg); } }
.tb-outils { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px 8px; border-bottom: 1px solid #e3e8f0; background: #f8fafc; }
.tb-b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #3d4a63; cursor: pointer; padding: 0; }
.tb-b:hover { background: #e8edf5; }
.tb-b.is-actif { background: #dbe4ff; color: #1d4ed8; }
.tb-sep { width: 1px; height: 20px; background: #dbe1ea; margin: 0 5px; }
.tb-coul { position: relative; display: inline-flex; }
.tb-coul i { position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; border-radius: 2px; pointer-events: none; border: 1px solid rgba(0, 0, 0, .12); }
.tb .tb-outils select.tb-format { width: auto; max-width: 150px; flex: none; min-width: 0; }
.tb-format { height: 30px; border: 1px solid #dbe1ea; border-radius: 7px; background: #fff; font: inherit; font-size: .8rem; padding: 0 6px; margin: 0 2px; }
.tb-etat { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #5b6b85; }
.tb-etat > span { display: inline-flex; align-items: center; gap: 4px; }
.tb-cours .ms { animation: tb-tourne 1s linear infinite; }
.tb-ok { color: #16a34a; } .tb-ko { color: #dc2626; } .tb-ro { color: #6a7494; }
.tb-reessai { padding: 2px 8px; font-size: .74rem; }
.tb-formule { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid #e3e8f0; }
.tb-formule[hidden] { display: none; }
.tb-adr { min-width: 74px; padding: 4px 8px; border: 1px solid #dbe1ea; border-radius: 6px; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; color: #3d4a63; text-align: center; background: #f8fafc; }
.tb-fx { color: #7c3aed; display: inline-flex; }
.tb-saisie { flex: 1; min-width: 0; border: 1px solid #dbe1ea; border-radius: 6px; padding: 5px 8px; font: inherit; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.tb-saisie:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 2px #e0e7ff; }
.tb-defil { flex: 1; overflow: auto; position: relative; background: #fff; }
.tb-t { border-collapse: separate; border-spacing: 0; table-layout: fixed; user-select: none; }
.tb-t th, .tb-t td { border-right: 1px solid #e6eaf1; border-bottom: 1px solid #e6eaf1; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; }
.tb-lettres th { position: sticky; top: 0; z-index: 3; height: 26px; background: #f1f4f9; color: #5b6b85; font-weight: 600; font-size: .74rem; text-align: center; }
.tb-t th.tb-coin { position: sticky; left: 0; top: 0; z-index: 5; background: #e9edf4; }
.tb-let { cursor: pointer; }
.tb-let.is-liee span { color: #1d4ed8; }
.tb-lettres .tb-let.is-sel { background: #dbe4ff; color: #1d4ed8; }
.tb-lettres .tb-let.is-fige { z-index: 4; }
.tb-let .ms { vertical-align: -2px; color: #7c3aed; }
.tb-col-menu { position: absolute; right: 2px; top: 4px; width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; color: #8a94ab; cursor: pointer; padding: 0; display: none; align-items: center; justify-content: center; }
.tb-let:hover .tb-col-menu { display: inline-flex; }
.tb-col-menu:hover { background: #dbe1ea; color: #1f2a44; }
.tb-redim { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
.tb-redim-l { position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; cursor: row-resize; z-index: 2; }
.tb-t th.tb-num { position: sticky; left: 0; z-index: 2; background: #f1f4f9; color: #6a7494; font-weight: 500; font-size: .72rem; text-align: center; cursor: pointer; }
.tb-t th.tb-num.is-sel { background: #dbe4ff; color: #1d4ed8; }
.tb-num.is-virt { color: #b6bfd0; }
.tb-ouvrir { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 0; padding: 0; border-radius: 4px; background: transparent; color: #7c3aed; display: none; align-items: center; justify-content: center; cursor: pointer; }
.tb-num:hover .tb-ouvrir { display: inline-flex; }
.tb-t .tb-entete td, .tb-t .tb-entete th { position: sticky; z-index: 2; background: #f8fafc; }
.tb-t .tb-entete th.tb-num { z-index: 4; }
.tb-entete td { color: #1f2a44; }
.tb-c { cursor: cell; background: #fff; color: #1f2a44; }
.tb-t td.tb-c.is-fige { position: sticky; z-index: 1; }
.tb-t .tb-entete td.tb-c.is-fige { z-index: 3; }
.tb-c.is-liee { background: #fbfcff; }
.tb-c.is-err { color: #dc2626; }
.tb-c.is-masque { color: #a0a8b8; letter-spacing: 1px; }
.tb-c.is-sel { box-shadow: inset 0 0 0 9999px rgba(79, 70, 229, .08); }
.tb-c.is-actif { outline: 2px solid #4f46e5; outline-offset: -2px; z-index: 2; }
.tb-c.is-recopie { box-shadow: inset 0 0 0 9999px rgba(22, 163, 74, .10); outline: 1px dashed #16a34a; outline-offset: -1px; }
.tb-poignee { position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; background: #4f46e5; border: 1px solid #fff; cursor: crosshair; z-index: 3; }
.tb-case { display: inline-flex; color: #16a34a; vertical-align: middle; }
.tb-case:not(.is-on) { color: #a0a8b8; }
.tb-liste { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); display: inline-flex; color: #6a7494; cursor: pointer; background: inherit; }
.tb-com { position: absolute; right: 0; top: 0; width: 0; height: 0; border-top: 7px solid #f59e0b; border-left: 7px solid transparent; }
.tb-t .tb-g td, .tb-t .tb-g th { background: #f3f0ff; color: #3b2a8a; font-size: .8rem; }
.tb-t .tb-g--total td, .tb-t .tb-g--total th { background: #e9e3ff; font-weight: 700; }
.tb-t .tb-esp td { padding: 0; border: 0; }
.tb-ed[hidden] { display: none; }
.tb-ed { position: absolute; z-index: 10; border: 2px solid #4f46e5; border-radius: 0; padding: 4px 6px; font: inherit; font-size: .84rem; resize: none; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(30, 41, 59, .18); white-space: pre; line-height: 1.35; outline: none; box-sizing: border-box; }
.tb-pied { display: flex; align-items: center; gap: 10px; border-top: 1px solid #e3e8f0; background: #f8fafc; min-height: 36px; padding: 0 8px; }
.tb-onglets { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; min-width: 0; }
.tb-onglet { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 6px 10px; border-radius: 0 0 8px 8px; font: inherit; font-size: .8rem; color: #5b6b85; cursor: pointer; white-space: nowrap; border-top: 2px solid transparent; }
.tb-onglet:hover { background: #eef2f7; }
.tb-onglet.is-actif { background: #fff; color: #1d4ed8; border-top-color: #4f46e5; font-weight: 600; box-shadow: 0 1px 3px rgba(30, 41, 59, .08); }
.tb-onglet-menu { display: inline-flex; color: #8a94ab; border-radius: 4px; }
.tb-onglet-menu:hover { background: #dbe1ea; color: #1f2a44; }
.tb-onglet--plus { padding: 6px 8px; }
.tb-statut { display: flex; gap: 14px; font-size: .76rem; color: #5b6b85; white-space: nowrap; }
.tb-statut b { color: #1f2a44; font-variant-numeric: tabular-nums; }
.tb-menu { position: fixed; z-index: 1500; background: #fff; border: 1px solid #dbe1ea; border-radius: 10px; box-shadow: 0 12px 32px rgba(30, 41, 59, .18); padding: 5px; min-width: 210px; max-height: 60vh; overflow: auto; }
.tb-menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 7px 10px; border-radius: 7px; font: inherit; font-size: .84rem; color: #1f2a44; cursor: pointer; text-align: left; }
.tb-menu button:hover { background: #eef2f7; }
.tb-menu .tb-danger { color: #dc2626; }
.tb-menu hr { border: 0; border-top: 1px solid #e6eaf1; margin: 4px 0; }
.tb-menu--choix { min-width: 160px; }
.tb-pal { display: grid; grid-template-columns: repeat(7, 22px); gap: 5px; padding: 6px; }
.tb-menu .tb-pal button { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .12); }
.tb-menu .tb-pal button:hover { transform: scale(1.12); }
.tb-dlg-fond { position: fixed; inset: 0; z-index: 1600; background: rgba(15, 23, 42, .38); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tb-dlg { width: min(520px, 100%); max-height: 86vh; background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(15, 23, 42, .3); display: flex; flex-direction: column; overflow: hidden; }
.tb-dlg-tete { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-size: 1rem; }
.tb-dlg-corps { padding: 4px 16px 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.tb-dlg-corps input, .tb-dlg-corps select, .tb-dlg-corps textarea { font: inherit; padding: 7px 10px; border: 1px solid #cfd8e6; border-radius: 8px; min-width: 0; }
.tb-dlg-corps h5 { margin: 8px 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #5b6b85; }
.tb-dlg-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef1f6; }
.tb-champ { display: flex; flex-direction: column; gap: 4px; } .tb-champ span { font-size: .8rem; color: #5b6b85; font-weight: 600; }
.tb-ligne2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tb-ligne2 > input { flex: 1; }
.tb-ligne2 [hidden] { display: none; }
.tb-coche { display: inline-flex; align-items: center; gap: 6px; }
.tb-doux { color: #6a7494; margin: 0; font-size: .84rem; }
.tb-large { width: 100%; }
.tb-regle { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #eef1f6; border-radius: 8px; }
.tb-regle > span:nth-child(2) { flex: 1; }
.tb-apercu { display: inline-flex; width: 30px; height: 22px; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid #e3e8f0; font-size: .75rem; }
.tb-inst-bandeau { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff8e6; border-bottom: 1px solid #f3d27a; color: #7a5600; }
.tb-inst-bandeau span { flex: 1; font-size: .8rem; }
.tb-inst { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tb-t--inst { table-layout: auto; }
.tb-t--inst td, .tb-t--inst th { height: 26px; }
.tb-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2100; background: #1f2a44; color: #fff; padding: 9px 16px; border-radius: 10px; font-size: .84rem; box-shadow: 0 10px 28px rgba(15, 23, 42, .3); transition: opacity .4s; max-width: 90vw; }
.tb-toast.is-parti { opacity: 0; }
@media (max-width: 720px) { .tb { min-height: 60vh; } .tb-statut span:nth-child(n+3) { display: none; } .tb-adr { min-width: 56px; } }

/* Vue Rapprochement 3 voies (vue-rapprochement3.js) : file d'attente et dossier. */
.vu-vue--rapprochement3 { height: 100%; overflow: visible; }
.r3-hote { height: 100%; min-height: 0; }
.r3 { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; outline: none; font-size: .86rem; color: #1f2a44; }
.r3-msg { margin: auto; display: flex; align-items: center; gap: 10px; color: #5b6b85; padding: 30px; }
.r3-msg .ms { animation: tb-tourne 1s linear infinite; }
.r3-msg--ko .ms { animation: none; color: #d97706; }
.r3-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; flex: none; }
.r3-kpi { --c: #2563eb; text-align: left; border: 1px solid #e3e8f0; border-radius: 12px; background: #fff; padding: 8px 12px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.r3-kpi:hover { border-color: color-mix(in srgb, var(--c) 40%, #e3e8f0); box-shadow: 0 3px 12px rgba(30, 50, 90, .06); }
.r3-kpi-t { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #5b6b85; }
.r3-kpi-t .ms { color: var(--c); }
.r3-kpi b { font-size: 1.35rem; line-height: 1.1; color: var(--c); }
.r3-kpi small { color: #5b6b85; }
.r3-kpi--bleu { --c: #2563eb; } .r3-kpi--vert { --c: #16a34a; } .r3-kpi--rouge { --c: #dc2626; } .r3-kpi--orange { --c: #d97706; }
.r3-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
.r3-onglets { display: flex; gap: 4px; flex-wrap: wrap; background: #f1f4f9; padding: 4px; border-radius: 10px; }
.r3-onglet { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: .82rem; color: #3d4a63; cursor: pointer; }
.r3-onglet small { color: #8a94ab; font-weight: 700; }
.r3-onglet.is-actif { background: #fff; color: #1f2a44; font-weight: 600; box-shadow: 0 1px 3px rgba(30, 41, 59, .1); }
.r3-tol { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #5b6b85; background: #f1f4f9; padding: 5px 10px; border-radius: 8px; }
.r3-groupe { flex: none; }
.r3-defil { flex: 1; min-height: 0; overflow: auto; border: 1px solid #e3e8f0; border-radius: 12px; background: #fff; }
.r3-t { width: 100%; border-collapse: collapse; }
.r3-t th { position: sticky; top: 0; z-index: 1; background: #f8fafc; text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #5b6b85; padding: 9px 10px; border-bottom: 1px solid #e3e8f0; }
.r3-t td { padding: 9px 10px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.r3-t td small { display: block; color: #8a94ab; font-size: .74rem; }
.r3-t td:nth-child(2), .r3-t td:nth-child(4), .r3-t th { white-space: nowrap; }
.r3-l { cursor: pointer; }
.r3-l:hover { background: #f8fafc; }
.r3-l.is-alerte { background: #fff8f8; }
.r3-l.is-curseur { box-shadow: inset 3px 0 0 #4f46e5; }
.r3-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.r3-c { width: 34px; }
.r3-br { display: inline-flex; padding: 1px 7px; border-radius: 6px; background: #eef2f7; font-size: .74rem; font-weight: 600; color: #3d4a63; white-space: nowrap; }
.r3-br--cmd { background: #e0f2fe; color: #0e7490; }
.r3-rouge { color: #dc2626; } .r3-vert { color: #16a34a; } .r3-orange { color: #d97706; }
.r3-pas { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.r3-pas--vert { background: #dcfce7; color: #15803d; } .r3-pas--rouge { background: #fee2e2; color: #b91c1c; } .r3-pas--orange { background: #ffedd5; color: #b45309; }
.r3-pas--gris { background: #eef2f7; color: #475569; } .r3-pas--violet { background: #ede9fe; color: #6d28d9; }
.r3-vide { color: #6a7494; padding: 30px; text-align: center; }
.r3-aide { margin: 0; font-size: .74rem; color: #8a94ab; flex: none; }
.r3 .btn .ms { vertical-align: -3px; margin-right: 3px; }
.r3-conf { background: #b91c1c !important; color: #fff !important; border-color: #b91c1c !important; }
.r3-danger { border-color: #fca5a5 !important; color: #b91c1c !important; }
.r3-dossier { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; overflow-y: auto; }
.r3-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 8px 12px; flex: none; }
.r3-gros { font-weight: 700; }
.r3-esp { flex: 1; }
.r3-sugg { display: flex; align-items: center; gap: 12px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 10px 14px; color: #3730a3; flex: none; }
.r3-sugg > div { flex: 1; } .r3-sugg p { margin: 2px 0 0; color: #1f2a44; }
.r3-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; flex: 1 0 auto; min-height: 460px; max-height: 78vh; }
.r3-docs, .r3-lignes { background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; min-height: 0; display: flex; flex-direction: column; }
.r3-docs-onglets { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid #eef1f6; flex-wrap: wrap; }
.r3-doc { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e3e8f0; background: #f8fafc; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: .78rem; cursor: pointer; color: #3d4a63; }
.r3-doc.is-actif { border-color: #1f2a44; background: #fff; color: #1f2a44; font-weight: 600; }
.r3-piece { flex: 1; min-height: 300px; display: flex; }
.r3-pdf { flex: 1; border: 0; width: 100%; min-height: 420px; }
.r3-img { max-width: 100%; margin: auto; display: block; }
.r3-doux { color: #8a94ab; padding: 10px; }
.r3-lignes { overflow: auto; padding: 12px; gap: 10px; }
.r3-lignes h3 { margin: 0 0 4px; font-size: 1rem; }
.r3-ligne { border: 1px solid #eef1f6; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.r3-ligne.is-ecart { border-color: #fecaca; background: #fffafa; }
.r3-ligne header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.r3-ligne header b { flex: 1; min-width: 140px; }
.r3-ligne header small { color: #8a94ab; }
.r3-num { color: #8a94ab; font-weight: 700; font-size: .76rem; background: #f1f4f9; border-radius: 5px; padding: 1px 6px; }
.r3-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: #f8fafc; border-radius: 8px; padding: 8px 10px; }
.r3-3 div { display: flex; flex-direction: column; min-width: 0; }
.r3-3 small { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: #5b6b85; }
.r3-3 b { font-size: .98rem; font-variant-numeric: tabular-nums; }
.r3-3 span { color: #5b6b85; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.r3-ligne footer { font-size: .82rem; color: #5b6b85; }
.r3-pied { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 16px rgba(30, 41, 59, .06); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 10px 14px; flex: none; }
.r3-pied > div { display: flex; flex-direction: column; } .r3-pied small { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: #5b6b85; }
.r3-pied b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.r3-pied .r3-tol { margin-left: 0; }
.r3-f { border: 1px solid #e3e8f0; border-radius: 10px; padding: 8px 12px 4px; margin: 0 0 10px; }
.r3-f legend { font-weight: 700; font-size: .84rem; padding: 0 6px; }
.r3-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .r3-corps { grid-template-columns: 1fr; } .r3-pdf { min-height: 360px; } .r3-t th:nth-child(4), .r3-t td:nth-child(4), .r3-t th:nth-child(6), .r3-t td:nth-child(6) { display: none; } }

/* Mon PC / Mon SERVER > Configuration (odesa-config.js, PLAN_CONFIG_ODESA.md) : dense, une grille qui se remplit. */
.oc { --dad-primary: var(--in-mauve); --dad-bg: #f5f7fa; --dad-panel: #fff; --dad-border: #dfe4ec; --dad-muted: #64748b;
  display: flex; flex-direction: column; gap: 10px; min-height: 0; height: calc(100vh - 330px); min-height: 420px; }
.mp-corps.is-max .oc { height: calc(100vh - 190px); }
.oc-tete { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oc-etat { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; color: var(--doux); font-size: .8rem; }
.oc .btn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 12px; font-size: .84rem; }
.oc .btn .ms { margin-right: 0; }
.oc-avis { flex: none; margin: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--neutre); color: var(--texte); font-size: .82rem; }
.oc-avis--relance { background: #fff7ed; color: #9a3412; }
.oc-onglets { flex: none; display: flex; gap: 6px; flex-wrap: wrap; }
.oc-onglet { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte); color: var(--doux); font: inherit; font-size: .84rem; cursor: pointer; }
.oc-onglet:hover { color: var(--texte); }
.oc-onglet.is-actif { background: var(--in-mauve-fond); border-color: transparent; color: var(--in-mauve); font-weight: 600; }
.oc-corps { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.oc-bloc { border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.oc-bloc h3 { margin: 0; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.oc-bloc h3 small { font-weight: 400; color: var(--doux); font-size: .74rem; }
.oc-cap:not(.is-on) { opacity: .8; padding-block: 8px; }
.oc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; align-items: end; }
.oc-champ { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; }
.oc-champ--long, .oc-champ--secret, .oc-champ--large { grid-column: span 2; }
.oc-champ--bool { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 10px; border: 1px solid var(--dad-border); border-radius: 8px; }
.oc-champ--bool .oc-lib { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; color: var(--texte); white-space: normal; line-height: 1.15; }
.oc .dad-input { width: 100%; min-height: 32px; box-sizing: border-box; padding: 0 10px; font-size: .84rem; }
.oc-champ.is-modifie .dad-input, .oc-champ--bool.is-modifie { border-color: var(--in-mauve); box-shadow: 0 0 0 2px var(--in-mauve-fond); }
.oc-lib { font-size: .7rem; font-weight: 700; color: var(--doux); text-transform: uppercase; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-liaison { display: inline-flex; color: #b45309; font-style: normal; cursor: help; }
.oc-aide { margin: 0; color: var(--doux); font-size: .76rem; }
.oc-champ .oc-aide { font-size: .7rem; }
.oc-secret { display: flex; align-items: center; gap: 6px; }
.oc-secret .in-pastille { flex: none; }
.oc-secret .dad-input { flex: 1 1 auto; min-width: 0; }
.oc-bascule { position: relative; flex: none; width: 34px; height: 19px; cursor: pointer; margin: 0; }
.oc-bascule input { opacity: 0; width: 0; height: 0; position: absolute; }
.oc-bascule span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .15s; }
.oc-bascule span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; }
.oc-bascule input:checked + span { background: #16a34a; }
.oc-bascule input:checked + span::after { transform: translateX(15px); }
.oc-bascule input:focus-visible + span { outline: 2px solid var(--in-mauve); outline-offset: 2px; }
.oc-listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 10px 14px; align-items: start; }
.oc-liste { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oc-liste--large { grid-column: 1 / -1; }
.oc-table td small.oc-aide { white-space: nowrap; }
.oc-liste-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oc-liste-tete b { font-size: .82rem; }
.oc-table { max-height: 240px; overflow: auto; border: 1px solid var(--bord); border-radius: 8px; }
.oc-table table { width: 100%; border-collapse: collapse; }
.oc-table th { position: sticky; top: 0; z-index: 1; background: var(--carte); text-align: left; font-size: .7rem; color: var(--doux); padding: 5px 8px; border-bottom: 1px solid var(--bord); }
.oc-table td { padding: 2px 4px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.oc-table tr:last-child td { border-bottom: 0; }
.oc-table tr.is-modifie td { background: var(--in-mauve-fond); }
.oc-table .dad-input { min-height: 28px; padding: 0 8px; font-size: .8rem; border-color: transparent; background: transparent; }
.oc-table .dad-input:hover, .oc-table .dad-input:focus { border-color: var(--dad-border); background: var(--dad-panel); }
.oc-table .dad-btn-icon { width: 28px; height: 28px; }
.oc-l-act { width: 1%; white-space: nowrap; }
.oc-barre { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); }
.oc-n { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .86rem; color: var(--in-mauve); }
.oc-esp { flex: 1 1 auto; }
.oc-code { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--doux); }
.oc-code .dad-input { width: 100px; letter-spacing: .1em; }
.oc-chemin { display: flex; align-items: center; gap: 4px; min-width: 0; }
.oc-chemin .dad-input { flex: 1 1 auto; min-width: 0; }
.oc .oc-pick { flex: none; width: 32px; height: 32px; color: var(--in-mauve); border: 1px solid var(--dad-border); border-radius: 8px; background: var(--dad-panel); }
.oc-table .oc-pick { width: 28px; height: 28px; }
.oc-ch-fond { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, .35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.oc-ch { width: min(640px, 100%); max-height: min(640px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--carte); border-radius: 14px; box-shadow: 0 20px 60px rgba(15, 23, 42, .25); overflow: hidden; }
.oc-ch-tete { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bord); }
.oc-ch-tete b { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; }
.oc-ch-corps { flex: 1 1 auto; min-height: 160px; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.oc-ch-raccourcis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oc-ch-ici { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--neutre); min-width: 0; }
.oc-ch-ici code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.oc-ch-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.oc-ch-liste button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--texte); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.oc-ch-liste button:hover, .oc-ch-liste button:focus-visible { background: var(--in-mauve-fond); color: var(--in-mauve); outline: none; }
.oc-ch-liste button span:not(.ms) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-ch-liste .ms:first-child { color: #d4a017; }
.oc-ch-liste button small { flex: none; color: var(--doux); font-size: .74rem; }
.oc-ch-liste button.is-pris { background: var(--in-mauve-fond); color: var(--in-mauve); font-weight: 600; }
.oc-ch-liste button[data-od="oc-ch-fichier"] .ms:first-child { color: var(--doux); }
.oc-ch-pied { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--bord); }
@media (max-width: 760px) {
  .oc { height: auto; min-height: 0; }
  .oc-corps { overflow: visible; }
  .oc-grille, .oc-listes { grid-template-columns: minmax(0, 1fr); }
  .oc-champ--long, .oc-champ--secret, .oc-champ--large { grid-column: auto; }
  .oc-code { flex: 1 1 100%; }
}

/* Le texte d'une clé ODESA et son bouton Copier (odesa.js, prestataires.js) */
.pa-cle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.pa-cle > span { font-weight: 600; font-size: 0.85rem; }
.pa-cle code { font: 600 0.9rem/1.3 ui-monospace, Consolas, monospace; letter-spacing: .03em; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, .06); user-select: all; word-break: break-all; }
.pa-cle--ligne { margin: 0; flex-wrap: nowrap; }
.pa-cle-copier { padding: 5px 10px; min-height: 0; font-size: 0.85rem; transition: background .2s, color .2s; }
.pa-cle-copier--ok { background: #e2f5d3; color: #1f7a10; border-color: #1f7a10; }
.pa-cle-copier--ko { background: #fde8ec; color: #b0122f; border-color: #b0122f; }
@media (max-width: 640px) { .pa-cle--ligne { flex-wrap: wrap; } }

/* ------------------------------------------------------------------
   Vue Document : devis, commandes, factures, avoirs (vue-document.js, PLAN_VUES.md §7)
   ------------------------------------------------------------------ */
.fac { display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; }
.fac-kpis .r3-kpi.is-actif { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.fac-barre { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fac-barre .r3-onglets { flex: 1 1 auto; }
.fac-cherche { display: flex; align-items: center; gap: 6px; border: 1px solid #dbe2ec; border-radius: 10px; padding: 0 10px; background: #fff; min-width: 220px; }
.fac-cherche input { border: 0; outline: 0; padding: 7px 0; font: inherit; background: transparent; width: 100%; }
.fac-nouveau { position: relative; }
.fac-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid #e3e8f0; border-radius: 10px; box-shadow: 0 10px 30px rgba(30, 50, 90, .14); padding: 4px; min-width: 200px; display: flex; flex-direction: column; }
.fac-menu button { border: 0; background: transparent; text-align: left; padding: 8px 10px; border-radius: 8px; font: inherit; cursor: pointer; }
.fac-menu button:hover { background: #f1f4f9; }
.fac-types { display: flex; gap: 6px; flex-wrap: wrap; }
.fac-type { border: 1px solid #dbe2ec; background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .82rem; cursor: pointer; color: #3d4a63; }
.fac-type.is-actif { background: #1f2a44; border-color: #1f2a44; color: #fff; }
.fac-table-boite { flex: 1 1 auto; min-height: 160px; overflow: auto; border: 1px solid #e3e8f0; border-radius: 12px; background: #fff; }
.fac-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.fac-table thead th { position: sticky; top: 0; background: #f7f9fc; z-index: 1; text-align: left; padding: 0; border-bottom: 1px solid #e3e8f0; }
.fac-table thead button { border: 0; background: transparent; font: inherit; font-weight: 600; color: #3d4a63; padding: 9px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.fac-table td { padding: 9px 10px; border-bottom: 1px solid #eef1f6; }
.fac-table tbody tr[data-fac-ouvrir] { cursor: pointer; }
.fac-table tbody tr[data-fac-ouvrir]:hover { background: #f7f9fc; }
.fac-table tr.is-retard td:first-child { box-shadow: inset 3px 0 0 #d64545; }
.fac-table td small { color: #8a94ab; }
.fac-n { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fac-rouge { color: #c62828; }
.fac-statut { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  color: color-mix(in srgb, var(--c) 78%, #000); background: color-mix(in srgb, var(--c) 16%, #fff); white-space: nowrap; }
.fac-statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* La fiche : actions à gauche, indicateurs en haut, la pièce à droite. */
.fac-fiche { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; min-height: 0; flex: 1 1 auto; }
.fac-actions { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 8px; align-self: start; position: sticky; top: 0; }
.fac-act { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: .9rem; color: #1f2a44; cursor: pointer; }
.fac-act .ms { color: var(--c, #5b6b85); }
.fac-act:hover { background: #f1f4f9; }
.fac-act:disabled { opacity: .5; cursor: default; }
.fac-act--retour { color: #5b6b85; border-bottom: 1px solid #eef1f6; border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.fac-act--danger, .fac-act--danger .ms { color: #c62828; }
.fac-act.is-arme { background: #c62828; color: #fff; animation: fac-pulse 1s ease-in-out infinite alternate; }
.fac-act.is-arme .ms { color: #fff; }
@keyframes fac-pulse { from { box-shadow: 0 0 0 0 rgba(198, 40, 40, .35); } to { box-shadow: 0 0 0 5px rgba(198, 40, 40, 0); } }
.fac-act-titre { margin: 8px 10px 2px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a94ab; }
.fac-act-titre:empty { margin: 4px 0; border-top: 1px solid #eef1f6; }
.fac-fiche-corps { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: auto; }
.fac-fiche-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fac-kpi { background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.fac-kpi > small:first-child { color: #5b6b85; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.fac-kpi b { font-size: 1.3rem; color: #1f2a44; }
.fac-kpi > small + b + small { color: #5b6b85; font-size: .8rem; }
.fac-kpi.is-rouge > small + b + small { color: #c62828; }
.fac-kpi.is-rouge b { color: #c62828; }
.fac-kpi.is-vert b { color: #2e7d32; }
.fac-kpi .fac-statut { align-self: flex-start; }
.fac-verrou { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 10px; background: #f1f4f9; color: #3d4a63; font-size: .85rem; }

/* La pièce, comme imprimée, avec son ruban d'état en coin. */
.fac-papier { position: relative; overflow: hidden; background: #fff; border: 1px solid #e3e8f0; border-radius: 6px; box-shadow: 0 6px 24px rgba(30, 50, 90, .08);
  padding: 58px 40px 28px 84px; display: flex; flex-direction: column; gap: 22px; color: #1f2a44; max-width: 1060px; width: 100%; box-sizing: border-box; }
.fac-p-lignes { overflow-x: auto; }
.fac-ruban { position: absolute; top: 34px; left: -56px; width: 230px; transform: rotate(-45deg); background: var(--c); color: #fff; text-align: center;
  padding: 6px 0; font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); pointer-events: none; z-index: 2; }
.fac-ruban span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 34px; }
.fac-p-tete { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.fac-p-titre { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.fac-p-titre h2 { margin: 0; font-size: 1.5rem; letter-spacing: .02em; }
.fac-p-titre b { font-size: 1.05rem; }
.fac-p-titre span { color: #5b6b85; font-size: .85rem; }
.fac-partie { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.fac-partie small { color: #8a94ab; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fac-partie b { font-size: 1rem; }
.fac-p-client { align-self: flex-end; min-width: 240px; background: #f7f9fc; border-radius: 8px; padding: 12px 14px; }
.fac-lignes { width: 100%; border-collapse: collapse; font-size: .86rem; }
.fac-lignes th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #5b6b85; border-bottom: 2px solid #1f2a44; padding: 6px 6px; }
.fac-lignes td.fac-court { white-space: nowrap; }
.fac-lignes td { padding: 6px 6px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.fac-in { width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; padding: 5px 6px; font: inherit; background: #fbfcfe; min-width: 60px; }
.fac-in:hover { border-color: #dbe2ec; }
.fac-in:focus { border-color: var(--vert, #4cb81a); background: #fff; outline: 0; }
.fac-in--n { text-align: right; min-width: 52px; max-width: 110px; }
.fac-in--des { min-width: 200px; }
.fac-lignes th:first-child { width: 36%; }
.fac-moins button { border: 0; background: transparent; color: #8a94ab; cursor: pointer; border-radius: 6px; padding: 3px; display: inline-flex; }
.fac-moins button:hover { color: #c62828; background: #fde8ec; }
.fac-moins button.is-arme { color: #fff; background: #c62828; }
.fac-plus { margin-top: 8px; border: 1px dashed #c3ccda; background: transparent; border-radius: 8px; padding: 7px 12px; font: inherit; font-size: .86rem; color: #3d4a63; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fac-plus:hover { border-color: var(--vert, #4cb81a); color: var(--vert-fonce, #2f8a12); }
.fac-p-bas { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.fac-p-mentions { flex: 1 1 auto; font-size: .76rem; color: #5b6b85; }
.fac-p-mentions small { display: block; margin-top: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a94ab; }
.fac-p-mentions p { margin: 3px 0; }
.fac-totaux { border-collapse: collapse; min-width: 260px; font-size: .9rem; }
.fac-totaux td { padding: 4px 6px; }
.fac-totaux td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fac-totaux .fac-ttc td { font-weight: 800; border-top: 2px solid #1f2a44; font-size: 1rem; }
.fac-apercu { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .78rem; color: #8a94ab; }

/* L'envoi par courriel. */
.fac-fond { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.fac-fenetre { background: #fff; border-radius: 14px; width: min(560px, 100%); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(15, 23, 42, .3); box-sizing: border-box; }
.fac-fenetre h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.fac-fenetre-pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.fac-champ { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: #3d4a63; }
.fac-champ input, .fac-champ textarea, .fac-champ select { font: inherit; border: 1px solid #dbe2ec; border-radius: 8px; padding: 7px 9px; background: #fff; }
.fac-champ small { color: #8a94ab; }

/* Le réglage de la vue. */
.fac-cfg { display: flex; flex-direction: column; gap: 14px; }
.fac-cfg h4 { margin: 0 0 6px; }
.fac-aide { margin: 0 0 6px; color: #5b6b85; font-size: .85rem; }
.fac-cfg > section > select { font: inherit; border: 1px solid #dbe2ec; border-radius: 8px; padding: 7px 9px; min-width: 260px; }
.fac-cfg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; }

@media (max-width: 860px) {
  .fac-fiche { grid-template-columns: 1fr; }
  .fac-actions { position: static; flex-direction: row; flex-wrap: wrap; }
  .fac-act-titre { flex-basis: 100%; }
  .fac-papier { padding: 56px 16px 20px 30px; }
  .fac-p-tete { padding-left: 40px; }
  .fac-p-tete, .fac-p-bas { flex-direction: column; }
  .fac-p-titre { text-align: left; }
  .fac-p-client { align-self: stretch; }
}

/* Documents des lignes (vues.js) : la photo d'une ligne ou de sa ligne liée, sans copie. */
.vu-doc-vig { border: 0; padding: 0; background: none; cursor: zoom-in; display: inline-flex; align-items: center; justify-content: center; width: var(--cote, 30px); height: var(--cote, 30px); flex: none; border-radius: 6px; overflow: hidden; color: #6b7790; vertical-align: middle; margin-right: 6px; }
.vu-doc-vig img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.vu-doc-vig:hover { box-shadow: 0 0 0 2px #a78bfa; }
.vu-carte-docs { display: flex; gap: 6px; margin-bottom: 6px; }
.vu-rp-docs { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #edf1f6; overflow-x: auto; }
.vu-rp-doc { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 112px; }
.vu-rp-doc figcaption { font: 600 0.72rem inherit; color: #4a5568; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.vu-rp-doc-vigs { display: flex; gap: 6px; }
.vu-rp-doc-vigs .vu-doc-vig { margin: 0; background: #f4f6fa; }
.vu-rp-doc-vide { width: 112px; height: 112px; border: 1px dashed #cfd7e3; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #8a94a6; font-size: 0.74rem; }
.vu-rp-libs { margin: 6px 0 0; font-weight: 600; }
/* La fiche avec le document à côté : la photo à gauche (zoom, rotation), les champs à droite. */
.modale.vu-modale-doc { width: min(1280px, 97vw); height: calc(100vh - 40px); }
.vu-modale-doc > .oa-form { flex: 1; min-height: 0; max-height: none; overflow: hidden; display: flex; flex-direction: column; }
/* Plus fort que « .da-form > * { flex: none } » (PWA) : la fiche prend la hauteur de la fenêtre, pas celle de ses champs. */
.vu-modale-doc > .oa-form > .vu-fiche2 { flex: 1 1 0; min-height: 0; }
.vu-fiche2 { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; }
.vu-fiche2-doc { min-height: 0; display: flex; }
.vu-fiche2-champs { min-height: 0; overflow: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 12px; }
.vu-doc { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.vu-doc-barre { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #edf1f6; }
.vu-doc-choix { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.vu-doc-onglet { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #dde3ec; background: #f8fafc; border-radius: 999px; padding: 3px 10px; font: 600 0.76rem inherit; color: #4a5568; cursor: pointer; white-space: nowrap; }
.vu-doc-onglet.is-actif { border-color: #a78bfa; background: #f5f3ff; color: #5b21b6; }
.vu-doc-nom { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font: 600 0.8rem inherit; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vu-doc-outils { display: inline-flex; gap: 2px; }
.vu-doc-outils button { border: 0; background: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; color: #4a5568; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.vu-doc-outils button:hover { background: #f1f5f9; color: #1a202c; box-shadow: none; }
.vu-doc-scene { flex: 1; min-height: 0; overflow: auto; background: #f4f6fa; display: flex; align-items: center; justify-content: center; }
.vu-doc-scene.is-zoom { display: block; }
.vu-doc-scene img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.2s; }
.vu-doc-scene.is-zoom img { max-width: none; max-height: none; }
.vu-doc-pdf { width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 900px) {
  .modale.vu-modale-doc { height: auto; }
  .vu-modale-doc > .oa-form { overflow: auto; display: block; }
  .vu-fiche2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .vu-fiche2-doc { height: 55vh; }
  .vu-fiche2-champs { overflow: visible; }
}
/* Mes serveurs : les sites Tekitisy (PLAN_MES_SERVEURS.md), bleu sarcelle. */
.od-choix-carte--tk { border-top-color: #0f8f8a; }
.od-choix-carte--tk .od-choix-pic { background: linear-gradient(160deg, #2cc5b8 0%, #0b6f6a 100%); }
.od-choix-carte--tk.is-hs { opacity: .72; cursor: default; }
.mp--tk .mp-tete--tk .cf-pic { background: linear-gradient(160deg, #2cc5b8 0%, #0b6f6a 100%); color: #fff; }
.dn-bases { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid #edf1f6; overflow-x: auto; flex: none; }
.dn-base { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #dde3ec; background: #f8fafc; border-radius: 999px; padding: 3px 10px; margin: 0; font: 600 .76rem inherit; color: #4a5568; cursor: pointer; white-space: nowrap; }
.dn-base.is-actif { border-color: #2cc5b8; background: #e6f7f5; color: #0b6f6a; }

/* ---------------------------------------------- vue Courrier (vue-courrier.js, PLAN_VUE_COURRIER.md) */
.dn-vue:has(.vu-vue--courrier), .da-vue:has(.vu-vue--courrier) { overflow: hidden; display: flex; flex-direction: column; }
.vu-vue--courrier { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mc-hote { flex: 1; min-height: 0; display: flex; }
.mc { --mc-vert: #1f6b35; --mc-vert-clair: #e8f3ea; --mc-bord: #e6e9ef; --mc-texte: #1f2937; --mc-doux: #6b7280; --mc-fond: #f7f8fa;
  flex: 1; min-height: 520px; display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); background: #fff; border: 1px solid var(--mc-bord); border-radius: 16px; overflow: hidden; color: var(--mc-texte); }
.mc-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mc-col--liste { border-right: 1px solid var(--mc-bord); background: #fff; }
.mc-col--lecture { overflow: hidden; background: #fff; }
.mc-l { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mc-l-defile { flex: 1; min-height: 0; overflow-y: auto; }
.mc-l-defile > [data-z="pieces"] { padding: 0 22px 8px; }
.mc-l-defile > [data-z="pieces"]:empty { display: none; }
@media (max-width: 800px) { .mc-l-defile > [data-z="pieces"] { padding: 0 14px 8px; } }
.mc-l-redac { flex: none; max-height: 70%; overflow-y: auto; border-top: 1px solid var(--mc-bord); background: #fafbfc; }
.mc-l-redac:empty { display: none; }
.mc-l-redac .mc-redac { margin: 10px 22px 12px; }
.mc-col--lecture > .mc-l-tete, .mc-col--lecture > .mc-nouveau { flex: none; }
.mc-col--lecture:has(> .mc-nouveau) { overflow-y: auto; }
.mc button { font-family: inherit; }
.mc .ms { line-height: 1; }

/* Boutons */
.mc-ib { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 7px; border: 0; border-radius: 9px; background: transparent; color: #4b5563; cursor: pointer; text-decoration: none; }
.mc-ib:hover:not(:disabled) { background: #f1f3f6; color: var(--mc-texte); }
.mc-ib:disabled { opacity: .45; cursor: default; }
.mc-ib--cadre { border: 1px solid var(--mc-bord); background: #fff; }
.mc-ib--danger { color: #dc2626; }
.mc-ib--danger:hover:not(:disabled) { background: #fef2f2; color: #b91c1c; }
.mc-ib--vert { background: var(--mc-vert); color: #fff; }
.mc-ib--vert:hover:not(:disabled) { background: #185a2c; color: #fff; }
.mc-ib--petit { min-width: 30px; height: 30px; padding: 0 5px; }
.mc-ib.is-arme, .mc-bt.is-arme { background: #dc2626; border-color: #dc2626; color: #fff; padding: 0 10px; font-weight: 600; font-size: .8rem; }
.mc-bt { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 1px solid var(--mc-bord); border-radius: 10px; background: #fff; color: #374151; font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mc-bt:hover:not(:disabled) { background: #f6f7f9; border-color: #d6dae2; }
.mc-bt:disabled { opacity: .5; cursor: default; }
.mc-lien { border: 0; background: none; padding: 0; color: #1a56db; font-weight: 600; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.mc-lien:hover { text-decoration: underline; }
.mc-lg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mc-lg:empty { display: none; }

/* Menus */
.mc-ancre { position: relative; display: inline-flex; }
.mc-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--mc-bord); border-radius: 12px; box-shadow: 0 14px 38px rgba(15, 23, 42, .16); padding: 6px; display: flex; flex-direction: column; }
.mc-menu--droite { left: auto; right: 0; }
.mc-menu--haut { top: auto; bottom: calc(100% + 6px); }
.mc-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; border-radius: 8px; padding: 8px 10px; font-size: .86rem; color: var(--mc-texte); text-align: left; cursor: pointer; white-space: nowrap; }
.mc-menu button:hover { background: #f3f4f6; }
.mc-menu hr { border: 0; border-top: 1px solid var(--mc-bord); margin: 4px 2px; }
.mc-menu-attente { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--mc-doux); font-size: .85rem; }

/* Colonne de la liste */
.mc-tete { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
.mc-barre { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-titre { margin: 0; display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 1.15rem; font-weight: 700; color: var(--mc-texte); }
.mc-titre > span:not(.ms):not(.mc-compte) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-compte { flex: none; background: #eef0f3; color: #4b5563; border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 700; }
.mc-barre-droite { display: inline-flex; align-items: center; gap: 4px; }
.mc-pils { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-ib.is-actif { border-color: var(--mc-vert); color: var(--mc-vert); background: var(--mc-vert-clair); }
.mc-ib { position: relative; }
.mc-pastille-n { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--mc-vert); color: #fff; font-size: .68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mc-actifs { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-filtre-actif { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 4px 8px 4px 11px; background: var(--mc-vert-clair); color: var(--mc-vert); font-size: .78rem; font-weight: 700; cursor: pointer; }
.mc-filtre-actif:hover { background: #d7ecdb; }
.mc-menu--filtre { min-width: 260px; max-height: 70vh; }
.mc-menu-titre { margin: 8px 10px 2px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9ca3af; }
.mc-menu-titre:first-child { margin-top: 2px; }
.mc-menu button[aria-checked="true"] { color: var(--mc-vert); font-weight: 700; }
.mc-pil { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--mc-bord); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: .84rem; font-weight: 600; color: #4b5563; cursor: pointer; }
.mc-pil:hover { border-color: #cfd5de; }
.mc-pil.is-actif { background: var(--mc-vert); border-color: var(--mc-vert); color: #fff; }
.mc-pils--statut .mc-pil { padding: 4px 11px; font-size: .78rem; }
.mc-cherche { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mc-bord); border-radius: 11px; padding: 0 12px; color: #9ca3af; background: #fff; }
.mc-cherche:focus-within { border-color: #9ec5a8; box-shadow: 0 0 0 3px rgba(31, 107, 53, .12); }
.mc-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 9px 0; font: inherit; font-size: .9rem; background: transparent; color: var(--mc-texte); }

/* Gestes en masse */
.mc-masse { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; background: var(--mc-vert-clair); border-top: 1px solid #d3e6d7; border-bottom: 1px solid #d3e6d7; flex-wrap: wrap; }
.mc-masse[hidden] { display: none; }
.mc-masse-n { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--mc-vert); margin-right: auto; }
.mc-masse-act { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }

/* La liste */
.mc-liste { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--mc-bord); }
.mc-item { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px 13px 12px; border-bottom: 1px solid #f0f2f5; border-left: 3px solid transparent; cursor: pointer; outline: 0; }
.mc-item:hover { background: #fafbfc; }
.mc-item:focus-visible { box-shadow: inset 0 0 0 2px #9ec5a8; }
.mc-item.is-sel { background: #eef6f0; border-left-color: var(--mc-vert); }
.mc-item.is-coche { background: #f4f9f5; }
.mc-coche { flex: none; display: inline-flex; align-items: center; padding-top: 9px; cursor: pointer; }
.mc-coche input { width: 17px; height: 17px; accent-color: var(--mc-vert); cursor: pointer; margin: 0; }
.mc-masse .mc-coche { padding-top: 0; }
.mc-cat { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.mc-cat--init { color: #fff; background: var(--c); font-weight: 700; font-size: .82rem; }
.mc-item-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mc-ligne1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mc-de { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; color: var(--mc-texte); }
.mc-item.is-non-lu .mc-de, .mc-item.is-non-lu .mc-objet { font-weight: 800; }
.mc-item.is-non-lu .mc-de::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #1d6fd8; vertical-align: 1px; }
.mc-badge { flex: none; border-radius: 6px; padding: 2px 8px; font-size: .72rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.mc-drapeau { flex: none; color: #dc2626; display: inline-flex; }
.mc-heure { flex: none; color: var(--mc-doux); font-size: .78rem; }
.mc-objet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 600; color: #111827; }
.mc-ligne3 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mc-apercu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; color: var(--mc-doux); }
.mc-pj-n { flex: none; display: inline-flex; align-items: center; gap: 1px; color: #4b5563; font-size: .76rem; }
.mc-pj-n small { font-size: .72rem; }
.mc-fin { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 14px; color: var(--mc-doux); font-size: .82rem; }
.mc-liste.is-compact .mc-item { padding-top: 8px; padding-bottom: 8px; }
.mc-liste.is-compact .mc-ligne3 { display: none; }
.mc-liste.is-compact .mc-cat { width: 32px; height: 32px; }
.mc-liste.is-compact .mc-coche { padding-top: 6px; }

/* La lecture */
.mc-vide { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9ca3af; }
.mc-vide p { margin: 0; }
.mc-l-tete { flex: none; position: relative; z-index: 6; display: flex; border-bottom: 1px solid #f0f2f5; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px 10px; background: #fff; flex-wrap: wrap; }
.mc-sujet { margin: 0; flex: 1 1 260px; min-width: 0; font-size: 1.35rem; font-weight: 700; color: #111827; overflow-wrap: anywhere; }
.mc-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-fermer { display: none; }
.mc-puces { display: flex; align-items: center; gap: 8px; padding: 0 22px 12px; flex-wrap: wrap; }
.mc-puce { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 6px 12px; font-size: .84rem; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.mc-puce--bt { cursor: pointer; }
.mc-puce--bt:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 20%, #fff); }
.mc-sep { width: 1px; height: 22px; background: var(--mc-bord); margin: 0 4px; }
.mc-assigne { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 3px 6px 3px 3px; border-radius: 999px; font-size: .86rem; color: var(--mc-doux); cursor: pointer; }
.mc-assigne:hover:not(:disabled) { background: #f3f4f6; }
.mc-assigne b { color: var(--mc-texte); }
.mc-av { flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; }
.mc-av--p { width: 28px; height: 28px; font-size: .72rem; }
.mc-av--ic { color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }

/* Bandeau VAILS AI */
.mc-ia { display: flex; align-items: center; gap: 14px; margin: 0 22px 14px; padding: 12px 10px 12px 16px; border: 1px solid #ddd6fe; border-radius: 14px; background: linear-gradient(90deg, #f5f3ff, #f8f7ff); }
.mc-ia-marque { flex: none; display: inline-flex; align-items: center; gap: 6px; color: #6d28d9; font-weight: 800; font-size: .82rem; letter-spacing: .02em; }
.mc-ia-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-ia-texte b { font-size: .9rem; color: #1f2937; }
.mc-ia-texte small { color: #6b7280; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-ia-lien { flex: none; display: inline-flex; align-items: center; gap: 4px; border: 0; border-right: 1px solid #ddd6fe; background: none; padding: 4px 14px 4px 4px; color: #6d28d9; font-weight: 700; font-size: .84rem; cursor: pointer; }
.mc-ia-lien:hover { text-decoration: underline; }
.mc-ia .mc-ib { color: #6d28d9; }

/* Expéditeur */
.mc-exp { display: flex; align-items: flex-start; gap: 14px; padding: 4px 22px 14px; }
.mc-exp-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-exp-qui b { font-size: 1rem; color: #111827; }
.mc-exp-qui small { color: var(--mc-doux); font-size: .84rem; overflow-wrap: anywhere; }
.mc-exp-droite { flex: none; display: flex; align-items: center; gap: 8px; color: var(--mc-doux); font-size: .84rem; }

/* Onglets produits par la Logique */
.mc-onglets { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--mc-bord); }
.mc-onglet { display: inline-flex; align-items: center; gap: 6px; border: 0; border-bottom: 2px solid transparent; background: none; padding: 8px 10px; font-size: .84rem; font-weight: 600; color: var(--mc-doux); cursor: pointer; margin-bottom: -1px; }
.mc-onglet:hover { color: var(--mc-texte); }
.mc-onglet.is-actif { color: var(--mc-vert); border-bottom-color: var(--mc-vert); }
.mc-onglet.is-attente { color: #b45309; }

/* Corps */
.mc-corps { padding: 14px 22px 6px; }
.mc-html { display: block; width: 100%; min-height: 80px; border: 0; background: #fff; }
.mc-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: .95rem; line-height: 1.55; color: var(--mc-texte); }
.mc-json { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; background: var(--mc-fond); border-radius: 10px; padding: 12px; }
.mc-md { font-size: .95rem; line-height: 1.6; }
.mc-md table { border-collapse: collapse; } .mc-md td, .mc-md th { border: 1px solid var(--mc-bord); padding: 5px 9px; }
.mc-attente { display: flex; align-items: center; gap: 8px; color: var(--mc-doux); }
.mc-avis { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: .82rem; }
.mc-avis span:not(.ms) { flex: 1; }
.mc-form { padding: 8px 0; }
.mc-form .btn { display: inline-flex; align-items: center; gap: 6px; }
.mc-form-rep dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 8px 0 0; font-size: .9rem; }
.mc-form-rep dt { color: var(--mc-doux); } .mc-form-rep dd { margin: 0; overflow-wrap: anywhere; }
.mc-note { display: flex; align-items: center; gap: 6px; color: var(--mc-vert); margin: 0; }
.mc-pdf { display: flex; min-height: 420px; }
.mc-pdf-cadre { flex: 1; min-height: 520px; border: 1px solid var(--mc-bord); border-radius: 10px; }

/* Pièces jointes */
.mc-pjs { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.mc-pjs-grille { display: flex; flex-wrap: wrap; gap: 10px; }
.mc-pj { flex: 0 1 380px; display: flex; align-items: center; gap: 12px; min-width: 0; border: 1px solid var(--mc-bord); border-radius: 12px; padding: 10px 8px 10px 12px; background: #fff; }
.mc-pj:hover { border-color: #d3d8e0; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.mc-pj-ic { flex: none; width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 11%, #fff); }
.mc-pj-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mc-pj-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.mc-pj-txt small { color: var(--mc-doux); font-size: .78rem; }
.mc-pj-act { flex: none; display: inline-flex; }
.mc-pj-inl { align-self: flex-start; color: var(--mc-doux); }

/* Rédaction intégrée */
.mc-redac { margin: 10px 22px 6px; border: 1px solid var(--mc-bord); border-radius: 14px; background: #fff; overflow: visible; }
.mc-redac:focus-within { border-color: #b7d4be; box-shadow: 0 0 0 3px rgba(31, 107, 53, .08); }
.mc-redac-onglets { display: flex; align-items: center; gap: 2px; padding: 4px 6px 0 10px; border-bottom: 1px solid var(--mc-bord); }
.mc-redac-fermer { margin-left: auto; }
.mc-redac-onglets button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-bottom: 2px solid transparent; background: none; padding: 9px 10px; font-size: .86rem; font-weight: 600; color: var(--mc-doux); cursor: pointer; margin-bottom: -1px; }
.mc-redac-onglets button.is-actif { color: var(--mc-vert); border-bottom-color: var(--mc-vert); }
.mc-redac-a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #f0f2f5; font-size: .86rem; color: var(--mc-doux); }
.mc-redac-a input, .mc-redac-a select { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: .9rem; color: var(--mc-texte); background: transparent; }
.mc-redac-zone { min-height: 72px; max-height: 42vh; overflow-y: auto; padding: 12px 14px; font-size: .92rem; line-height: 1.55; outline: 0; color: var(--mc-texte); }
.mc-redac-zone--grand { min-height: 240px; max-height: none; }
.mc-redac-zone:empty::before { content: attr(data-ph); color: #9ca3af; }
.mc-redac-zone blockquote { margin: 0 0 0 6px; padding-left: 10px; border-left: 3px solid var(--mc-bord); color: #4b5563; }
textarea.mc-redac-zone { width: 100%; border: 0; resize: vertical; font-family: inherit; box-sizing: border-box; }
.mc-redac-ia { display: flex; align-items: center; gap: 6px; margin: 0 14px 6px; color: #6d28d9; font-size: .78rem; }
.mc-redac-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 10px; flex-wrap: wrap; }
.mc-fmt { display: inline-flex; align-items: center; gap: 1px; flex-wrap: wrap; }
.mc-redac-droite { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.mc-ia-bt { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid #ddd6fe; border-radius: 10px; background: #f5f3ff; color: #6d28d9; font-weight: 700; font-size: .86rem; cursor: pointer; }
.mc-ia-bt:hover:not(:disabled) { background: #ede9fe; }
.mc-ia-bt:disabled { opacity: .55; cursor: default; }
.mc-envoi-groupe { display: inline-flex; }
.mc-envoi { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px 0 0 10px; }
.mc-envoi-plus { height: 38px; padding: 0 8px; border-radius: 0 10px 10px 0; border-left: 1px solid rgba(255, 255, 255, .35); display: inline-flex; align-items: center; }
.mc-redac .mc-redac-pied > .mc-envoi { border-radius: 10px; }
.mc-nouveau { padding: 4px 22px 16px; display: flex; flex-direction: column; }
.mc-nouveau .mc-redac { margin: 10px 0 0; }
.mc-nouveau .mc-envoi { border-radius: 10px; }

/* Pied : historique et notes */
.mc-pied { display: flex; gap: 4px; padding: 10px 22px 0; margin-top: 8px; border-bottom: 1px solid var(--mc-bord); }
.mc-pied button { display: inline-flex; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; background: none; padding: 9px 10px; font-size: .9rem; font-weight: 600; color: var(--mc-doux); cursor: pointer; margin-bottom: -1px; }
.mc-pied button.is-actif { color: var(--mc-vert); border-bottom-color: var(--mc-vert); }
.mc-pied-corps { padding: 10px 22px 22px; font-size: .86rem; }
.mc-chrono { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--mc-bord); display: flex; flex-direction: column; gap: 8px; }
.mc-chrono li { position: relative; }
.mc-chrono li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--mc-vert); }
.mc-chrono small { color: var(--mc-doux); }

/* Aperçu d'une pièce */
.mc-ap-fond { position: fixed; inset: 0; z-index: 1900; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mc-ap { width: min(1100px, 100%); height: min(90vh, 100%); background: #fff; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.mc-ap-tete { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #edf1f6; }
.mc-ap-tete b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-ap-corps { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: #f1f5f9; }
.mc-ap-corps img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mc-ap-corps iframe { width: 100%; height: 100%; border: 0; }
.mc-ap-txt { align-self: stretch; margin: 0; padding: 12px; white-space: pre-wrap; background: #fff; width: 100%; }

/* Réglage de la vue */
.mc-cfg section { margin-bottom: 12px; }
.mc-cfg h4 { margin: 0 0 6px; }
.mc-champ { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: #475569; }
.mc-champ input, .mc-champ select { font-family: inherit; font-size: .9rem; border: 1px solid #dde3ec; border-radius: 9px; padding: 7px 9px; min-width: 0; }
.mc-cfg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }

/* À l'étroit : une colonne, et des actions réduites à leur icône */
@media (max-width: 1100px) {
  .mc-bt span:not(.ms) { display: none; }
  .mc-bt { padding: 0 9px; }
}
@media (max-width: 800px) {
  .mc { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 12px; }
  .mc.mc--lecture .mc-col--liste, .mc:not(.mc--lecture) .mc-col--lecture { display: none; }
  .mc-col--liste { border-right: 0; }
  .mc-fermer { display: inline-flex; }
  .mc-l-tete, .mc-puces, .mc-exp, .mc-corps, .mc-onglets, .mc-pied, .mc-pied-corps { padding-left: 14px; padding-right: 14px; }
  .mc-ia, .mc-redac { margin-left: 14px; margin-right: 14px; }
  .mc-ia-texte small { white-space: normal; }
  .mc-exp-droite small { display: none; }
}

/* BlueDynamic (bluedynamic.js) : clés de déclaration et fournisseurs. */
.bd-soc { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.bd-soc select { min-width: 240px; max-width: 100%; }
.bd-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bd-form label { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--doux); }
.bd-form .btn { display: inline-flex; align-items: center; gap: 6px; }
.bd-neuve { border: 1px solid #fde68a; background: #fffbeb; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; animation: bd-arrivee .35s ease-out; }
.bd-neuve p { margin: 0 0 8px; color: #92400e; font-weight: 500; }
@keyframes bd-arrivee { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bd-secret { display: inline-block; max-width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; background: var(--neutre, #f1f5f9); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; margin-bottom: 8px; }
.bd-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.bd-ligne { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--bord); border-radius: 10px; min-width: 0; }
.bd-ligne.is-off { opacity: .6; }
.bd-ligne .btn { flex: none; padding: 5px 12px; min-height: 0; font-size: .82rem; }
.bd-l-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-l-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-l-txt b small { font-weight: 400; color: var(--doux); }
.bd-l-txt small { color: var(--doux); overflow-wrap: anywhere; }
.bd-motif { color: #b45309 !important; }
.bd-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; object-fit: contain; display: inline-flex; align-items: center; justify-content: center; background: #eff6ff; color: #1d4ed8; }
.in-pastille.in-pastille--actif { color: #15803d; background: #dcfce7; }
.bd-form input, .bd-soc select { padding: 9px 12px; border: 1px solid var(--champ-bord); border-radius: 10px; background: var(--champ); color: var(--texte); font: inherit; }
@media (max-width: 700px) { .bd-ligne { flex-wrap: wrap; } .bd-soc { flex-direction: column; align-items: stretch; } .bd-soc select { min-width: 0; } }

/* BlueDynamic dans la vue Courrier : « Nouveau message ▾ », composeur en fenêtre, bandeau et lecteur. */
.mc-nouveau-bt { display: inline-flex; gap: 1px; }
.mc-nouveau-bt > .mc-ib--vert:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mc-ib--fleche { width: 24px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.mc-bd-ic { width: 17px; height: 17px; object-fit: contain; flex: none; }
.mc-bd-fond { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: mc-bd-arrivee .18s ease-out; }
@keyframes mc-bd-arrivee { from { opacity: 0; } to { opacity: 1; } }
.mc-bd-modale { max-height: calc(100vh - 32px); background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(15, 23, 42, .32); display: flex; flex-direction: column; overflow: hidden; }
.mc-bd-tete { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid #e5e7eb; min-width: 0; }
.mc-bd-tete b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-bd-tete small { color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.mc-bd-cadre { display: flex; align-items: stretch; justify-content: center; min-height: 200px; }
.mc-bd-cadre .mc-attente { margin: auto; }
.mc-bd-frame { width: 100%; border: 0; display: block; background: #fff; }
.mc-bd-frame--lecture { border: 0; background: transparent; margin: 4px 0 14px; transition: height .2s ease; }
.mc-bd-bandeau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px; margin: 2px 0 10px; font-size: .88rem; border: 1px solid transparent; }
.mc-bd-bandeau > span:not(.ms) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mc-bd-bandeau .btn { padding: 5px 12px; min-height: 0; font-size: .82rem; }
.mc-bd-bandeau--ok { background: #ecfdf3; color: #166534; border-color: #bbf7d0; }
.mc-bd-bandeau--attention { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.mc-bd-bandeau--ko { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.mc-bd-joint { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0 8px; border-radius: 10px; background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; font-size: .88rem; }
.mc-bd-joint > span:not(.ms) { flex: 1; min-width: 0; }
.mc-redac-a input.is-erreur { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); animation: mc-secoue .3s ease; }
@keyframes mc-secoue { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Vue Courrier : finitions d'après la maquette (lignes compactes, hiérarchie des textes, pastilles
   pastel, métadonnées alignées, barre d'actions et en-têtes plus légers). */
.mc-item { padding: 10px 12px 10px 10px; gap: 10px; }
.mc-item-corps { gap: 1px; }
.mc-coche { padding-top: 8px; }
.mc-cat { width: 34px; height: 34px; margin-top: 1px; background: color-mix(in srgb, var(--c) 10%, #fff); }
.mc-de { font-size: .86rem; font-weight: 600; color: #111827; }
.mc-item.is-non-lu .mc-de { font-weight: 700; }
.mc-item.is-non-lu .mc-objet { font-weight: 600; color: #111827; }
.mc-objet { font-size: .83rem; font-weight: 500; color: #374151; }
.mc-apercu { font-size: .79rem; color: #6b7280; }
.mc-badge { padding: 1px 7px; border-radius: 6px; font-size: .69rem; font-weight: 600; background: color-mix(in srgb, var(--c) 9%, #fff); color: color-mix(in srgb, var(--c) 85%, #374151); }
.mc-heure { min-width: 42px; text-align: right; font-size: .75rem; font-variant-numeric: tabular-nums; }
.mc-pj-n { min-width: 26px; justify-content: flex-end; color: #6b7280; }
.mc-item.is-non-lu .mc-de::before { width: 7px; height: 7px; }

.mc-l-tete { padding: 14px 22px 8px; }
.mc-sujet { font-size: 1.22rem; font-weight: 700; }
.mc-actions { gap: 4px; }
.mc-bt { height: 32px; padding: 0 10px; font-size: .82rem; font-weight: 500; border-radius: 8px; gap: 5px; }
.mc-ib { min-width: 32px; height: 32px; border-radius: 8px; }

.mc-puces { gap: 6px; padding: 0 22px 10px; }
.mc-puce { padding: 4px 10px; border-radius: 8px; font-size: .79rem; font-weight: 500; background: color-mix(in srgb, var(--c) 9%, #fff); }
.mc-sep { height: 18px; }
.mc-assigne { font-size: .8rem; gap: 6px; }
.mc-assigne b { font-weight: 600; }
.mc-av.mc-av--p { width: 24px; height: 24px; font-size: .66rem; }

.mc-ia { gap: 12px; margin: 0 22px 12px; padding: 7px 6px 7px 14px; border-color: #ebe7fd; border-radius: 10px; background: #f8f6ff; }
.mc-ia-marque { font-weight: 600; font-size: .76rem; letter-spacing: 0; color: #5b21b6; }
.mc-ia-texte b { font-size: .84rem; font-weight: 600; }
.mc-ia-texte small { font-size: .78rem; }
.mc-ia-lien { font-weight: 500; font-size: .8rem; border-right-color: #ebe7fd; }

.mc-exp { gap: 12px; padding: 2px 22px 10px; }
.mc-av { width: 40px; height: 40px; font-size: .9rem; }
.mc-exp-qui b { font-size: .95rem; font-weight: 600; }
.mc-exp-qui small { font-size: .8rem; font-weight: 400; }
.mc-exp-droite { font-size: .8rem; }
.mc-onglet { font-weight: 500; font-size: .82rem; padding: 7px 10px; }

.mc-corps { padding: 10px 22px 4px; }
.mc-pjs { margin-top: 10px; }
.mc-pj { flex: 0 1 320px; padding: 7px 6px 7px 10px; border-radius: 10px; gap: 10px; }
.mc-pj-ic { width: 34px; height: 34px; border-radius: 8px; }
.mc-pj-txt b { font-size: .84rem; font-weight: 600; }
.mc-pj-txt small { font-size: .75rem; }
.mc-bd-bandeau b { font-weight: 600; }

/* Vue Courrier, refonte d'après la maquette de Nicolas (2026-10-23) : deux panneaux ; la liste en cartes
   à gros avatars, avec des tuiles d'outils ; la lecture à grand en-tête (avatar, sujet, De / À, actions
   avec libellé, étiquettes, cadenas BlueMail) ; en bas, les onglets, l'historique et les notes. */
.mc { gap: 14px; background: transparent; border: 0; border-radius: 0; overflow: visible; grid-template-columns: minmax(330px, 410px) minmax(0, 1fr); }
.mc-col { border-radius: 16px; overflow: hidden; }
.mc-col--liste { background: #edf2ef; border: 1px solid #dbe4df; }
.mc-col--lecture { background: #fff; border: 1px solid #dbe4df; box-shadow: 0 2px 12px rgba(15, 23, 42, .05); }

/* La liste : en-tête, tuiles */
.mc-tete { padding: 12px 12px 10px; gap: 10px; background: #f8fbf9; border-bottom: 1px solid #dbe4df; }
.mc-titre { font-size: 1.02rem; }
.mc-tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mc-tuiles > .mc-ancre { display: flex; min-width: 0; }
.mc-tuiles > .mc-ancre > .mc-tuile { flex: 1; min-width: 0; }
.mc-tuile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 2px; border: 1px solid #d8e2dc; border-radius: 10px;
  background: #fff; color: var(--mc-vert); font: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: background .15s, border-color .15s; }
.mc-tuile > span:not(.ms):not(.mc-pastille-n) { font-size: .72rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mc-tuile:hover:not(:disabled) { border-color: #9ec5a8; background: #f6fbf7; }
.mc-tuile:disabled { opacity: .45; cursor: default; }
.mc-tuile.is-actif { border-color: var(--mc-vert); background: var(--mc-vert-clair); }
.mc-tuile--danger { color: #c62828; }
.mc-tuile.is-arme { background: #dc2626; border-color: #dc2626; color: #fff; }
.mc-tuile.is-arme > span:not(.ms) { color: #fff; }
.mc-tuile .mc-pastille-n { top: 4px; right: 6px; }
.mc-menu-note { margin: 6px 10px; max-width: 240px; font-size: .82rem; color: var(--mc-doux); white-space: normal; }
.mc-etq-point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }

/* La liste : les cartes */
.mc-liste { border-top: 0; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.mc-item { flex: none; align-items: center; gap: 12px; padding: 12px 12px 12px 10px; background: #fff; border: 1px solid #e1e8e4; border-left: 3px solid transparent; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: box-shadow .15s, background .15s; }
.mc-item:hover { background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
.mc-item.is-sel { background: #f1f9f3; border-color: #cfe5d5; border-left-color: var(--mc-vert); }
.mc-item.is-coche { background: #f4faf6; }
.mc-item .mc-coche { padding-top: 0; }
.mc-av-l { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c); color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; }
.mc-av-marque { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); border: 2px solid #fff; box-sizing: border-box; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.mc-item-corps { gap: 2px; }
.mc-ligne1 { gap: 8px; }
.mc-de { font-size: .95rem; font-weight: 700; color: #111827; }
.mc-heure { min-width: 0; font-size: .78rem; color: #4b5563; }
.mc-pj-n { min-width: 0; color: #4b5563; }
.mc-objet { font-size: .86rem; font-weight: 500; color: #1f2937; }
.mc-item.is-non-lu .mc-objet { font-weight: 700; }
.mc-apercu { display: block; font-size: .78rem; color: #8a94a3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-etqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.mc-etq { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 6px; background: var(--c); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.5; }
.mc-etqs .mc-badge { padding: 2px 8px; font-size: .7rem; }
.mc-liste.is-compact .mc-item { padding-top: 7px; padding-bottom: 7px; }
.mc-liste.is-compact .mc-av-l { width: 36px; height: 36px; font-size: .82rem; }
.mc-liste.is-compact .mc-apercu { display: none; }

/* La lecture : l'en-tête */
.mc-col--lecture { container-type: inline-size; }
/* L'en-tête, le même pour tous les messages : avatar, objet, De, À et date sur toute la largeur ; les
   actions sur une ligne en dessous, alignées à droite. */
.mc-l-tete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; padding: 20px 24px 16px; border-bottom: 1px solid #e3e9e6; background: #fff; }
.mc-av-g { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #26323f; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.mc-l-qui { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mc-l-qui .mc-sujet { flex: none; margin: 0 0 4px; font-size: 1.4rem; font-weight: 700; color: #111827; }
.mc-l-ligne { display: flex; gap: 10px; min-width: 0; font-size: .9rem; color: #6b7280; }
.mc-l-ligne b { flex: none; min-width: 40px; color: #111827; font-weight: 700; }
.mc-l-ligne span { min-width: 0; overflow-wrap: anywhere; }
.mc-l-date { margin-top: 4px; font-size: .82rem; color: #8a94a3; }
/* Répondre, Répondre à tous, Transférer : en haut à droite de l'en-tête. */
.mc-l-rep { flex: none; display: flex; align-items: flex-start; gap: 2px; }
/* Sous l'en-tête : les viewers (défilent à l'horizontale), puis les outils à droite. */
.mc-l-barre { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; min-width: 0; padding-top: 6px; }
.mc-vues { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0 4px; }
.mc-vue { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border: 1px solid #e3e6ea; border-radius: 11px; background: #fff; font: inherit; font-size: .86rem; font-weight: 600; color: #374151; cursor: pointer; white-space: nowrap; }
.mc-vue:hover { background: #f6f7f9; }
.mc-vue[hidden] { display: none; }
/* « Plus » : les viewers qui ne tiennent pas sur la ligne (vue-courrier.js, ajusterVues). */
.mc-vues-ancre { flex: none; display: inline-flex; }
.mc-vues-plus { gap: 6px; padding: 7px 12px; }
.mc-vues-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: #eef1f4; color: var(--mc-texte); }
.mc-vues-plus[aria-expanded="true"] { background: #f6f7f9; border-color: #c9ced6; }
.mc-menu.mc-vues-menu { position: fixed; top: auto; left: auto; z-index: 950; max-width: 300px; }
.mc-vues-menu[hidden] { display: none; }
.mc-vue.is-actif { background: #eef8f1; border-color: #9fd3b0; color: var(--mc-vert); }
.mc-vue.is-attente { color: #b45309; }
.mc-l-outils { flex: none; flex-wrap: nowrap; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid #e3e9e6; }
.mc-act { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 66px; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: #d33a3a; font: inherit; cursor: pointer; }
.mc-act > span:not(.ms) { font-size: .78rem; font-weight: 600; color: #1f2937; white-space: nowrap; }
.mc-act:hover:not(:disabled) { background: #f6f7f9; }
.mc-act:disabled { opacity: .5; cursor: default; }
.mc-sep-v { align-self: stretch; width: 1px; margin: 4px 8px; background: #e3e9e6; }
.mc-ib.is-suivi { color: #dc2626; }
/* Le badge de confiance d'un BlueMail : en fin de la ligne des puces, dans leur style. */
.mc-confiance { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: .79rem; font-weight: 600; white-space: nowrap; }
.mc-confiance--ok { color: #166534; background: #ecfdf3; }
.mc-confiance--attention { color: #92400e; background: #fffbeb; }
.mc-confiance--ko { color: #b91c1c; background: #fef2f2; }
.mc-puces .mc-etqs { margin-top: 0; }

/* La lecture : informations, corps, pièces */
.mc-l-defile { display: flex; flex-direction: column; }
.mc-l-defile > * { flex: none; }
.mc-l-defile > [data-z="infos"] > .mc-puces:first-child { padding-top: 14px; }
.mc-corps { padding: 16px 24px 8px; }
.mc-texte { font-size: 1rem; line-height: 1.65; }
.mc-l-defile > [data-z="pieces"] { padding: 4px 24px 14px; }
.mc-pjs { margin-top: 6px; padding-top: 12px; border-top: 1px solid #eef2f0; }
.mc-pjs-titre { margin: 0 0 6px; font-size: .9rem; font-weight: 600; color: #374151; }

/* La lecture : la barre du bas (onglets, historique, notes), fixée en bas ; la réponse la remplace */
.mc-l-defile > [data-z="pied"] { margin-top: auto; position: sticky; bottom: 0; z-index: 2; background: #fff; border-top: 1px solid #e3e9e6; box-shadow: 0 -6px 14px rgba(15, 23, 42, .05); }
.mc-l-defile > [data-z="pied"]:empty { display: none; }
.mc-l-defile > [data-z="pied"] > .mc-pied-corps { max-height: 34vh; overflow-y: auto; padding: 14px 24px; border-bottom: 1px solid #e3e9e6; }
.mc-l:has(> .mc-l-redac:not(:empty)) > .mc-l-defile > [data-z="pied"] { display: none; }
.mc-pied { display: flex; align-items: stretch; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 16px; background: #f3f6f5; border: 0; }
.mc-pied-onglets { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.mc-pied .mc-onglet { margin: 0; padding: 13px 16px 11px; border: 0; border-bottom: 3px solid transparent; font-size: .95rem; font-weight: 600; color: #374151; }
.mc-pied .mc-onglet.is-actif { color: var(--mc-vert); border-bottom-color: var(--mc-vert); background: #fff; }
.mc-pied .mc-onglet.is-attente { color: #b45309; }
.mc-pied-droite { display: flex; align-items: center; gap: 4px; padding: 6px 0; }
.mc-pied .mc-pied-bt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid transparent; border-radius: 9px; background: none; font: inherit; font-size: .84rem; font-weight: 600; color: #4b5563; cursor: pointer; }
.mc-pied .mc-pied-bt:hover { background: #fff; }
.mc-pied .mc-pied-bt.is-actif { background: #fff; border-color: #cfe5d5; color: var(--mc-vert); }

/* Le composeur BlueMail : l'iframe a sa hauteur, la fenêtre défile au-delà de l'écran */
.mc-bd-cadre { max-height: calc(100vh - 120px); overflow-y: auto; align-items: flex-start; }

/* Une lecture étroite : les actions gardent leur icône seule. */
@container (max-width: 640px) {
  .mc-act > span:not(.ms) { display: none; }
  .mc-act { min-width: 40px; }
}
@media (max-width: 800px) {
  .mc { gap: 0; }
  .mc-l-tete { padding: 14px; gap: 6px 12px; }
  .mc-av-g { width: 44px; height: 44px; font-size: 1.05rem; }
  .mc-l-qui .mc-sujet { font-size: 1.15rem; }
  .mc-l-barre { flex-wrap: wrap; }
  .mc-vues { flex-basis: 100%; }
  .mc-l-outils { padding-left: 0; border-left: 0; margin-left: auto; }
  .mc-tuile > span:not(.ms):not(.mc-pastille-n) { font-size: .64rem; }
  .mc-corps, .mc-l-defile > [data-z="pieces"], .mc-l-defile > [data-z="pied"] > .mc-pied-corps { padding-left: 14px; padding-right: 14px; }
  .mc-pied { padding: 0 6px; }
  .mc-pied .mc-onglet { padding: 11px 10px 9px; font-size: .86rem; }
}

/* Le rédacteur : un nouveau message prend toute la hauteur ; pièces du poste, images collées, signature. */
.mc-col--lecture:has(> .mc-nouveau) { overflow: hidden; }
.mc-col--lecture > .mc-nouveau { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mc-nouveau > .mc-redac { flex: 1 1 auto; min-height: 280px; display: flex; flex-direction: column; }
.mc-nouveau .mc-redac-zone--grand { flex: 1 1 auto; min-height: 180px; overflow-y: auto; }
.mc-nouveau .mc-redac-pied { flex: none; }
.mc-redac.is-survol { outline: 2px dashed var(--mc-vert); outline-offset: -5px; background: #f4faf6; }
.mc-redac-zone img { max-width: 100%; height: auto; }
.mc-redac-zone [data-mc-sig] { color: #4b5563; }
.mc-pjs-r { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 2px; }
.mc-pjs-r:empty { display: none; }
.mc-pjr { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 280px; padding: 3px 3px 3px 8px; border: 1px solid #e3e6ea; border-radius: 10px; background: #f8fafc; font-size: .8rem; overflow: hidden; }
.mc-pjr .mc-pj-ic { color: var(--c); display: inline-flex; }
.mc-pjr b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1f2937; }
.mc-pjr small { flex: none; color: #6b7280; }
.mc-pjr.is-ko { border-color: #fecaca; background: #fef2f2; }
.mc-pjr.is-ko .mc-pj-ic, .mc-pjr.is-ko small { color: #b91c1c; }
.mc-pjr-barre { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--mc-vert); transition: width .2s; }
.mc-fmt .mc-sep-v { margin: 6px 4px; }
.mc-sig { width: min(640px, 100%); height: auto; max-height: 90vh; }
.mc-sig .mc-ap-tete small { color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sig-outils { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid #edf1f6; }
.mc-sig-zone { min-height: 180px; max-height: 50vh; overflow-y: auto; padding: 14px 16px; outline: 0; font-size: .92rem; line-height: 1.55; color: #1f2937; }
.mc-sig-zone:empty::before { content: attr(data-ph); color: #9ca3af; }
.mc-sig-zone img { max-width: 100%; height: auto; }
.mc-sig-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #edf1f6; }

/* Configuration ODESA : le compte rendu du dernier enregistrement. */
.oc-avis--ok { align-items: flex-start; background: #ecfdf3; color: #166534; }
.oc-fait { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oc-fait ul { margin: 2px 0; padding-left: 18px; }
.oc-fait li { overflow-wrap: anywhere; }
.oc-barre .btn--plein:disabled { opacity: .5; cursor: default; }

/* Une image du rédacteur sélectionnée : cadre, quatre poignées, tailles dessous (comme Gmail). */
.mc-img-cadre { position: fixed; z-index: 1500; border: 2px solid #1a73e8; box-sizing: border-box; pointer-events: none; }
.mc-img-p { position: absolute; width: 11px; height: 11px; background: #1a73e8; border: 1px solid #fff; pointer-events: auto; }
.mc-img-p--nw { left: -6px; top: -6px; cursor: nwse-resize; }
.mc-img-p--ne { right: -6px; top: -6px; cursor: nesw-resize; }
.mc-img-p--sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.mc-img-p--se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.mc-img-barre { position: absolute; left: 0; top: calc(100% + 6px); display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid #dadce0; border-radius: 8px; background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .15); pointer-events: auto; max-width: min(560px, 92vw); }
.mc-img-barre button { border: 0; background: none; padding: 5px 9px; border-radius: 6px; font: inherit; font-size: .8rem; color: #1a56db; cursor: pointer; white-space: nowrap; }
.mc-img-barre button:hover { background: #eef4ff; }
.mc-img-barre button[data-mc-img-a="retirer"] { color: #b91c1c; }
.mc-redac-zone img { cursor: pointer; }

/* Courrier 2.0 : le statut d'envoi sur la carte (file d'ODESA). */
.mc-statut-envoi { display: inline-flex; align-items: center; gap: 3px; }
.mc-item[draggable="true"] { cursor: grab; }

/* Mes serveurs : Production / Développement (PLAN_PROJECTS.md, P0). */
.od-dev-onglets { margin-bottom: 0; max-width: 420px; }
.od-dev-onglets a.in-onglet { text-align: center; text-decoration: none; }
.od-dev-instances h2 { margin: 0 0 6px; font-size: 1.1rem; }
.od-dev-vide { margin-top: 14px; }
.od-dev-titre { margin: 8px 0 0; font-size: 1.2rem; font-weight: 700; }
.od-dev-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.od-dev-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.od-dev-bas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.od-dev-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.od-dev-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.od-dev-form select, .od-dev-form input { font: inherit; padding: 9px 10px; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); color: inherit; }
.od-dev-form .btn { align-self: flex-start; }
.od-dev-liste { margin: 8px 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.od-dev-quota { margin-top: 12px; }