/* Lot K · la boîte de composants de Lexia : une seule version de chaque pièce
   d'écran, que tous les écrans de la refonte utilisent. Le parti est celui de
   la fiche (maquette validée) et de la charte : fond blanc, interface légère,
   une ligne par élément, un seul vert d'action ; l'ambre dit qu'on attend
   quelqu'un, le rouge qu'un geste est refusé, et rien d'autre n'est coloré.
   Les couleurs sont les noms de `mizan.css` (`--mz-*`), aucune en dur.
   Ce que chaque composant reçoit : `ecrans/composants.py`. Un écran ne garde
   de style à lui que sa mise en page. */

:root {
  /* 2026-10-22, Othmane : « un peu plus rond et moderne ». Les angles, les traits et l'air de tous les
     composants se règlent ici, une fois. Lot K3, 2026-10-23 : les valeurs de la maquette de l'application
     (feuille « Composants ») : des surfaces étagées, des ombres douces, un seul accent, le vert. */
  --lx-r-case: 10px; --lx-r-fenetre: 12px; --lx-r-cadre: 14px; --lx-r-rond: 999px;   /* lot D1 : le cadre de la maquette, 14 px */
  --lx-trait: color-mix(in srgb, var(--mz-trait) 65%, var(--mz-surface));
  --lx-trait-doux: #F1F0EB;                 /* entre deux lignes d'un tableau */
  --lx-bord-case: #E3E2DC;                  /* le bord d'une case et d'un bouton blanc */
  --lx-selection: #EFEEE9;                  /* une entrée choisie (sommaire, option) : un fond neutre, jamais le vert d'eau */
  --lx-survol: #FAFAF7;                     /* une ligne, un bouton blanc survolés */
  --lx-trait-tableau: #ECEBE6;              /* le tour d'un tableau */
  --lx-fond-fil: #FFFFFF;                   /* le fond du fil, sous les bulles ; lot F3 : blanc, comme la page (règle d'Othmane) */
  --lx-bulle-cabinet: #ECEBE5;              /* la bulle du cabinet ; celle de Lexia est blanche */
  --lx-tuile: #F7F7F4;                      /* une tuile d'un résumé */
  --lx-gris-clair: #EEEDE8; --lx-gris-lueur: #F7F6F2;   /* la barre vide, le squelette */
  --lx-marque-haut: #F1F0EB; --lx-marque-bas: #E6E5DF;  /* le carré des initiales d'une société */
  --lx-rouge-etat: #8E1B12;                 /* le mot d'une étiquette rouge, lisible sur son fond */
  --lx-cas: #F8F7F2; --lx-cas-trait: #E6E3D8;          /* l'encadré d'un cas, sur le papier */
  --lx-grille: #D2D2D7; --lx-grille-vide: #E0E0E5;      /* les traits d'un tableau du Word ; en pointillé, ceux qu'il n'a pas */
  --lx-titre: #F0F0F2;                                  /* le fond d'une case de titre du Word, adouci */
  --lx-repete: rgba(255, 149, 0, .07);                  /* la ligne d'un tableau qui se répète : l'orange des cas, à peine */
  --lx-ombre-pastille: 0 1px 2px rgba(28, 26, 22, .14);           /* le segment choisi */
  --lx-voile: rgba(27, 26, 23, .18);                              /* derrière un tiroir */
  --lx-ombre-barre: 0 0 0 1px rgba(28, 26, 22, .07), 0 14px 34px -14px rgba(28, 26, 22, .28);   /* la barre du fil */
  --lx-ombre-envoi: 0 4px 12px -4px rgba(14, 107, 90, .6);
  --lx-trait-bulle: 0 0 0 1px rgba(28, 26, 22, .05);
  --lx-ombre-bulle: 0 0 0 1px rgba(28, 26, 22, .05), 0 6px 18px -10px rgba(28, 26, 22, .14);
  --lx-ombre: 0 1px 2px rgba(27, 26, 23, .04), 0 2px 8px -2px rgba(27, 26, 23, .05);   /* lot D1 : un bloc qui se détache à peine */
  --lx-ombre-survol: 0 2px 4px rgba(27, 26, 23, .05), 0 12px 28px -10px rgba(27, 26, 23, .18);
  --lx-ombre-haute: 0 0 0 1px rgba(28, 26, 22, .05), 0 10px 28px -14px rgba(28, 26, 22, .22);
  --lx-ombre-flottante: 0 0 0 1px rgba(28, 26, 22, .07), 0 18px 40px -16px rgba(28, 26, 22, .30);
  --lx-ombre-bouton: 0 1px 1px rgba(28, 26, 22, .04);
  --lx-ombre-plein: 0 1px 2px rgba(14, 107, 90, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
  --lx-anneau: 0 0 0 3px var(--mz-vert-clair);
  --lx-hauteur: min(62vh, 560px);
  /* l'ambre qui attend et le rouge qui refuse, en avis : un fond, un trait, une encre lisible */
  --lx-ambre-fond: #FFF8EE; --lx-ambre-trait: #F4DFC2; --lx-ambre-encre: #4A2A0C;
  --lx-rouge-trait: #F3D0CC; --lx-rouge-encre: #5C130C;
  /* l'échelle de Geist */
  --lx-t-page: 26px; --lx-t-cadre: 14.5px; --lx-t-texte: 14.5px; --lx-t-note: 12.5px; --lx-t-etiquette: 11px;
  /* le mouvement, sans excès : un message arrive, une carte se replie, un compteur baisse */
  --lx-courbe: cubic-bezier(.2, .8, .2, 1); --lx-entree: 180ms; --lx-repli: 220ms; --lx-compte: 300ms;
}

/* Le mouvement se coupe tout entier quand l'ordinateur demande un mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
@keyframes lx-entre { from { opacity: 0; transform: translateY(6px); } }

/* Ce qui ne se lit qu'à l'oreille (lecteur d'écran), comme dans l'ancienne application */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Les mots ---------------------------------------------------------------- */
.lx-etiquette { display: block; margin: 0; font-size: 12px; font-weight: 500; color: var(--mz-encre-tenue); }
.lx-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--mz-encre-douce); }
.lx-tenue { color: var(--mz-encre-tenue); font-weight: 400; }
.lx-sous { display: block; font-size: 12px; line-height: 1.4; color: var(--mz-encre-douce); font-weight: 400; }
/* lot D1 · un compteur est gris (la maquette : la couleur ne dit que le retard et l'attente) ; le rouge, pour ce qui est dépassé */
.lx-compte.lx-compte-ambre { background: var(--mz-champ); color: var(--mz-encre-douce); }
.lx-compte { display: inline-block; min-width: 18px; padding: 1px 7px; border-radius: 999px; background: var(--mz-champ); color: var(--mz-encre-douce); font-size: 11px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.lx-nb { text-align: right; font-variant-numeric: tabular-nums; }
.lx-lien { height: auto; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; font: inherit; font-weight: 500; color: var(--mz-vert); text-decoration: none; cursor: pointer; }
/* un bouton de `mizan.css` est vert plein, au survol aussi : ces boutons-là sont des mots */
.lx-lien:hover, .lx-onglets > button:hover { background: none; border-color: transparent; text-decoration: underline; }
.lx-onglets > button:hover { text-decoration: none; }

/* La tête d'une page --------------------------------------------------------- */
.lx-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.lx-tete-texte { min-width: 0; flex: 1 1 320px; }
.lx-tete:has(.lx-tete-marque) { align-items: center; }
.lx-tete-marque { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(180deg, var(--lx-marque-haut), var(--lx-marque-bas));
  color: var(--mz-encre); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
/* lot K3 · le chapeau des pages de l'ancienne application lit la même règle que la tête de la boîte (une seule
   définition), en attendant que ces pages prennent le composant */
.lx-ariane, main.page .chapeau .ariane { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 6px; font-size: 13px; color: var(--mz-encre-tenue); }
.lx-ariane a, main.page .chapeau .ariane a { color: var(--mz-encre-douce); text-decoration: none; }
.lx-ariane a:hover { color: var(--mz-encre); text-decoration: underline; }
.lx-ariane [aria-current] { color: var(--mz-encre); font-weight: 500; }
.lx-sep { color: var(--mz-trait-fort); }
.lx-titre, main.page .chapeau h1 { margin: 0; font-size: var(--lx-t-page); line-height: 1.15; font-weight: 650; letter-spacing: -.015em; color: var(--mz-encre); text-wrap: balance; }
.lx-tete .lx-sous { margin: 4px 0 0; font-size: 13px; }
.lx-tete-compacte { align-items: center; }
.lx-tete-compacte .lx-titre { font-size: 18px; letter-spacing: -.01em; }
.lx-gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Les onglets : un trait vert sous celui qui est ouvert ---------------------- */
.lx-onglets { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--lx-trait); }   /* lot K3 : sur deux lignes plutôt que cachés */
.lx-onglets > a, .lx-onglets > button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; margin-bottom: -1px;
  height: auto; border: 0; border-radius: 0; box-shadow: none; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--mz-encre-douce); text-decoration: none; white-space: nowrap; cursor: pointer; }
.lx-onglets > a:hover, .lx-onglets > button:hover { color: var(--mz-encre); }
.lx-onglets > [aria-current], .lx-onglets > [aria-selected="true"] { color: var(--mz-encre); border-bottom-color: var(--mz-encre); }   /* lot D1 : le trait d'encre de la maquette */
.lx-onglets > :focus-visible { outline: 2px solid var(--mz-vert); outline-offset: -2px; border-radius: 6px; }
.lx-onglets-petits > a, .lx-onglets-petits > button { padding: 7px 10px; font-size: 13px; }

/* Le cadre : un blanc posé sur le fond --------------------------------------- */
.lx-cadre { background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: var(--lx-r-cadre); box-shadow: var(--lx-ombre); min-width: 0; scroll-margin-top: 16px; }
.lx-cadre-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 16px 20px 4px; }
.lx-cadre-tete h2 { margin: 0; flex: 1 1 auto; font-size: var(--lx-t-cadre); font-weight: 600; color: var(--mz-encre); }
.lx-cadre-corps { padding: 6px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.lx-cadre-corps > .lx-tableau:only-child { margin: 4px 0 0; }
.lx-cadre-corps:first-child { padding-top: 20px; }   /* un cadre sans titre */
/* lot K4 · un cadre replié en une ligne, son compte dans le titre ; il s'ouvre au clic */
details.lx-cadre > summary { list-style: none; cursor: pointer; padding-bottom: 18px; }
details.lx-cadre > summary::-webkit-details-marker { display: none; }
details.lx-cadre > summary h2::before { content: "›"; display: inline-block; width: 1em; color: var(--mz-encre-tenue); transition: transform .15s; }
details.lx-cadre[open] > summary { padding-bottom: 6px; }
details.lx-cadre[open] > summary h2::before { transform: rotate(90deg); }

/* Une ligne par élément ------------------------------------------------------ */
.lx-ligne { display: flex; align-items: center; gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--lx-trait); min-width: 0; scroll-margin-top: 80px; }
.lx-cadre-corps > .lx-ligne:last-child, .lx-lignes > .lx-ligne:last-child { border-bottom: 0; }
.lx-ligne-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lx-ligne-titre { font-weight: 500; color: var(--mz-encre); text-decoration: none; overflow-wrap: anywhere; }
a.lx-ligne-titre:hover { text-decoration: underline; }
.lx-ligne-valeur { flex: none; max-width: 55%; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lx-ligne-gestes { flex: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.lx-ligne-a-faire .lx-ligne-titre::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--mz-ambre); vertical-align: 1px; }
.lx-ligne-remplacee { color: var(--mz-encre-tenue); }
.lx-ligne-remplacee .lx-ligne-titre { color: var(--mz-encre-douce); }

/* Un élément suivi : un document, une formalité, ses phrases et ses gestes dessous */
.lx-element { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--lx-trait); min-width: 0; }
.lx-cadre-corps > .lx-element:last-child, .lx-lignes > .lx-element:last-child { border-bottom: 0; }
.lx-element-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.lx-element-tete > .lx-ligne-titre { flex: 1 1 160px; min-width: 0; }
.lx-element-corps { display: flex; flex-direction: column; gap: 8px; }
.lx-depot { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 32px; border: 1px dashed var(--mz-trait-fort);
  border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--mz-encre-douce); cursor: pointer; }
.lx-depot:hover, .lx-depot.lx-depot-survole { border-color: var(--mz-vert); color: var(--mz-vert); }
.lx-depot small { font-weight: 400; color: var(--mz-encre-tenue); }
.lx-depot:not([data-lx-pris]) :is([data-lx-choisi], [data-lx-oter]), .lx-depot[data-lx-pris] [data-lx-invite-sous] { display: none; }
/* lot K4 · « Déposer sa CIN », en haut de l'ajout d'une personne */
.lx-depot-piece { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--lx-trait); }
.lx-replie > summary { list-style: none; display: inline-flex; cursor: pointer; }
.lx-replie > summary::-webkit-details-marker { display: none; }
.lx-replie[open] > summary { margin-bottom: 8px; }
.lx-replie > form, .lx-replie > div { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }

/* Une information et sa valeur ----------------------------------------------- */
.lx-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.lx-infos-une { grid-template-columns: minmax(0, 1fr); }
.lx-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--lx-trait); min-width: 0; scroll-margin-top: 80px; }
.lx-info-lib { grid-column: 1 / -1; font-size: 12px; color: var(--mz-encre-douce); }
.lx-info-v { font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lx-info-outils { display: flex; gap: 10px; font-size: 13px; opacity: 0; transition: opacity .12s; }
.lx-info-edition { grid-column: 1 / -1; }
.lx-info-question { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin: 6px 0; max-width: 720px; }
.lx-info:hover .lx-info-outils, .lx-info:focus-within .lx-info-outils, .lx-info-vide .lx-info-outils { opacity: 1; }
@media (hover: none) { .lx-info-outils { opacity: 1; } }
.lx-origine { margin-left: 6px; color: var(--mz-eteint); opacity: 0; transition: opacity .12s; }
.lx-origine.bulle > summary { display: grid; place-items: center; width: 16px; height: 16px; border: 0; cursor: help; }
.lx-origine .lx-ic { width: 13px; height: 13px; }
.lx-origine .bulle-texte { font-weight: 400; }
.lx-origine.lx-lue { color: var(--mz-vert); }
/* lot D1 · l'origine d'une valeur : une icône discrète au survol de sa ligne, le détail dans la bulle (maquette) */
.lx-info:hover .lx-origine, .lx-info:focus-within .lx-origine, tr:hover .lx-origine, .lx-origine[open] { opacity: 1; }
@media (hover: none) { .lx-origine { opacity: 1; } }
.lx-info-vide .lx-info-v .lx-tenue::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--mz-ambre); vertical-align: 1px; }

/* Ce qui manque, en pastilles : un clic ouvre sa question sur place */
.lx-a-completer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 12px; }
.lx-pastille { border: 1px dashed var(--mz-trait-fort); border-radius: 999px; padding: 4px 10px; font-size: 13px; color: var(--mz-encre-douce); text-decoration: none; background: none; font-family: inherit; cursor: pointer; }
.lx-pastille::before { content: "+ "; color: var(--mz-vert); font-weight: 600; }
.lx-pastille:hover { border-style: solid; border-color: var(--mz-vert); color: var(--mz-vert); }

/* Une personne ---------------------------------------------------------------- */
.lx-personne { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--lx-trait); scroll-margin-top: 80px; }
.lx-personne-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lx-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mz-vert-clair); color: var(--mz-vert-fonce); display: grid; place-items: center; font-weight: 650; font-size: 13px; }
.lx-puces { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lx-puce-forte.lx-puce { background: var(--mz-encre); color: var(--mz-surface); font-weight: 600; }
.lx-puce { font-size: 12px; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: var(--mz-champ); color: var(--mz-encre-douce); white-space: nowrap; }

/* L'étiquette d'état : un mot sur son fond ----------------------------------- */
.lx-etat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lx-t-note); font-weight: 500; line-height: 1.6; padding: 1px 9px 1px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
/* lot D1 · le point de la maquette, de la couleur de l'état ; « Chez nous », en encre, garde son point clair */
.lx-etat::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.lx-etat-vert::before { background: var(--mz-vert); }
.lx-etat-ambre::before { background: var(--mz-ambre); }
.lx-etat-rouge::before { background: var(--mz-rouge); }
.lx-etat-gris::before { background: var(--mz-eteint); }
.lx-etat-vert { background: var(--mz-vert-clair); color: var(--mz-vert-fonce); }
.lx-etat-ambre { background: var(--mz-ambre-clair); color: var(--mz-ambre-fonce); }
.lx-etat-rouge { background: var(--mz-rouge-clair); color: var(--lx-rouge-etat); }
.lx-etat-gris { background: var(--mz-champ); color: var(--mz-encre-douce); }

/* Les boutons : `.btn` de l'application, un peu plus francs et plus ronds ; un groupe se tient sur une ligne.
   `refonte.css` et `cadre.css` fixent les petits boutons d'un `!important` : il faut le même pour les arrondir. */
main.page .btn:not(.icone):not(.pilule):not(.mini):not(.petit) { min-height: 32px; padding: 0 14px; border-radius: var(--lx-r-rond); }
main.page .btn.petit:not(.icone):not(.pilule):not(.mini) { min-height: 28px !important; padding: 0 11px !important; border-radius: var(--lx-r-rond) !important; font-size: 13px; }
/* Lot K3 · la maquette : blanc à bord fin et ombre d'un pixel ; le plein, vert, légèrement en relief ; au survol il
   fonce, au clic il s'enfonce d'un pixel. Lot D1 · la maquette du 2026-10-25 : une pastille ; le plein en dégradé ;
   « Annuler » et ce qui est secondaire, nus (`btn-nu`) ; ce qui retire, en rouge (`btn-danger`) ; une icône seule,
   un rond (`btn-icone`). Un seul plein par écran. */
.btn { border-radius: var(--lx-r-rond); font-size: 13.5px; font-weight: 500; background: var(--mz-surface); box-shadow: 0 0 0 1px var(--mz-trait-fort), var(--lx-ombre-bouton);
  transition: background .12s, box-shadow .12s, transform .12s; }
.btn:hover { background: var(--mz-survol-doux); box-shadow: 0 0 0 1px var(--mz-eteint), var(--lx-ombre-bouton); }
.btn:active { transform: translateY(1px); }
.btn.btn-plein { background: linear-gradient(180deg, var(--mz-vert-vif), var(--mz-vert)); color: var(--mz-surface); box-shadow: 0 0 0 1px var(--mz-vert), var(--lx-ombre-plein); }
.btn.btn-plein:hover { background: linear-gradient(180deg, var(--mz-vert), var(--mz-vert-fonce)); color: var(--mz-surface); box-shadow: 0 0 0 1px var(--mz-vert-fonce), var(--lx-ombre-plein); }
.btn.btn-nu { background: none; box-shadow: none; color: var(--mz-encre-douce); }
.btn.btn-nu:hover { background: var(--mz-survol); box-shadow: none; color: var(--mz-encre); }
.btn.btn-danger { color: var(--mz-rouge); }
.btn.btn-danger:hover { background: var(--mz-rouge-clair); box-shadow: 0 0 0 1px var(--mz-rouge-clair); }
.btn.btn-icone, main.page .btn.btn-icone:not(.petit) { width: 32px; min-width: 32px; padding: 0; justify-content: center; }
.btn.btn-icone.petit, main.page .btn.btn-icone.petit { width: 28px; min-width: 28px; padding: 0 !important; }
.btn.btn-doux { background: var(--mz-champ); box-shadow: none; }
main.page .btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--mz-trait-fort), var(--lx-anneau); }
main.page .btn.btn-plein:focus-visible { box-shadow: 0 0 0 3px var(--mz-vert-trait); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
/* un formulaire de l'application est une colonne (`mizan.css`) : un groupe de boutons reste une ligne */
.lx-boutons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.lx-boutons .lx-note { flex: 1 1 220px; }

/* L'avis : la cause entière, et le bouton qui en sort ------------------------ */
.lx-avis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-radius: var(--lx-r-fenetre); font-size: 13.5px; line-height: 1.45; }
.lx-avis p { margin: 0; flex: 1 1 260px; }
.lx-avis { border-radius: 12px; }
.lx-avis strong { font-weight: 600; }
.lx-avis-erreur { background: var(--mz-rouge-clair); color: var(--lx-rouge-encre); box-shadow: inset 0 0 0 1px var(--lx-rouge-trait); }
.lx-avis-erreur strong { color: var(--mz-rouge); }
.lx-avis-succes { background: var(--mz-vert-clair); color: var(--mz-vert-fonce); animation: lx-replie var(--lx-repli) var(--lx-courbe) both; transform-origin: top; }
.lx-avis-attente { background: var(--lx-ambre-fond); color: var(--lx-ambre-encre); box-shadow: inset 0 0 0 1px var(--lx-ambre-trait); }
.lx-avis-attente strong { color: var(--mz-ambre); }
.lx-avis-info { background: var(--mz-tete); color: var(--mz-encre-douce); box-shadow: inset 0 0 0 1px var(--lx-trait); }
/* Lot D6 · des avis qui s'empilent, dits en un (règle 8 des écrans) : une ligne et « Voir » ; ouverte, la liste courte,
   un point par ligne avec son geste. */
.lx-avis.lx-avis-points { display: block; padding: 0; }
.lx-avis-points > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.lx-avis-points > summary::-webkit-details-marker { display: none; }
.lx-avis-points > summary .btn { color: inherit; }
.lx-avis-points .lx-avis-masquer, .lx-avis-points[open] .lx-avis-voir { display: none; }
.lx-avis-points[open] .lx-avis-masquer { display: inline; }
.lx-avis-liste { margin: 0; padding: 0 16px 6px; list-style: none; animation: lx-replie var(--lx-repli) var(--lx-courbe) both; transform-origin: top; }
.lx-avis-liste li { max-width: none; color: inherit; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 8px 0; border-top: 1px solid var(--lx-ambre-trait); }
.lx-avis-liste li > span { flex: 1 1 260px; }

/* L'état vide ---------------------------------------------------------------- */
.lx-vide { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px; border-radius: var(--lx-r-fenetre); border: 1px dashed var(--mz-trait-fort); color: var(--mz-encre-douce); font-size: 13.5px; text-align: center; }
.lx-vide p { margin: 0; max-width: 62ch; }
.lx-vide .lx-sous { margin-top: 4px; }

/* Le chargement : un point qui tourne, et ce qui se prépare, en mots -------- */
.lx-chargement { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--mz-encre-douce); }
/* Lot F3 · Othmane, 2026-10-28 : « un petit truc discret, comme celui de Claude », partout où Lexia travaille (le fil,
   l'assistant, une lecture). Six points en rond : le cercle tourne lentement, un point plus vif court de l'un à l'autre. */
.lx-reflechit { --lx-rayon: -7px; --lx-point: 4px; position: relative; flex: none; display: inline-block; width: 18px; height: 18px; animation: lx-reflechit 3.2s linear infinite; }
.lx-reflechit i { position: absolute; top: 50%; left: 50%; width: var(--lx-point); height: var(--lx-point); margin: calc(var(--lx-point) / -2) 0 0 calc(var(--lx-point) / -2); border-radius: 50%; background: var(--mz-vert);
  opacity: .2; animation: lx-reflechit-point 1.2s ease-in-out infinite; }
.lx-reflechit i:nth-child(1) { transform: rotate(0deg) translateY(var(--lx-rayon)); animation-delay: -1s; }
.lx-reflechit i:nth-child(2) { transform: rotate(60deg) translateY(var(--lx-rayon)); animation-delay: -.8s; }
.lx-reflechit i:nth-child(3) { transform: rotate(120deg) translateY(var(--lx-rayon)); animation-delay: -.6s; }
.lx-reflechit i:nth-child(4) { transform: rotate(180deg) translateY(var(--lx-rayon)); animation-delay: -.4s; }
.lx-reflechit i:nth-child(5) { transform: rotate(240deg) translateY(var(--lx-rayon)); animation-delay: -.2s; }
.lx-reflechit i:nth-child(6) { transform: rotate(300deg) translateY(var(--lx-rayon)); animation-delay: 0s; }
/* Othmane, 2026-11-01 (maquette `lots/maquettes/attentes/`) · les mêmes points en grand, au milieu d'une page qui naît */
.lx-reflechit-grand { --lx-rayon: -32px; --lx-point: 10px; width: 80px; height: 80px; }
@keyframes lx-reflechit { to { rotate: 360deg; } }
@keyframes lx-reflechit-point { 0%, 100% { opacity: .2; scale: .55; } 35% { opacity: 1; scale: 1.1; } }
@media (prefers-reduced-motion: reduce) { .lx-reflechit, .lx-reflechit i { animation: none; } .lx-reflechit i { opacity: .6; } }
/* Lot K3 · ce qui se prépare se voit : trois lignes qui brillent doucement */
.lx-squelette { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 200px; }
.lx-squelette i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--lx-gris-clair) 0%, var(--lx-gris-lueur) 50%, var(--lx-gris-clair) 100%); background-size: 200% 100%; animation: lx-brille 1.4s ease-in-out infinite; }
.lx-squelette i:nth-child(1) { width: 92%; } .lx-squelette i:nth-child(2) { width: 74%; } .lx-squelette i:nth-child(3) { width: 58%; }
@keyframes lx-brille { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* La progression : « Reste N » et la barre ; la barre avance et le chiffre baisse (composants.js) */
.lx-progression { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.lx-barre { flex: 1; height: 6px; border-radius: 99px; background: var(--lx-gris-clair); overflow: hidden; min-width: 80px; }
.lx-barre > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--mz-vert-vif), var(--mz-vert)); transition: width var(--lx-compte) var(--lx-courbe); }

/* La case d'une information, selon son type ---------------------------------- */
/* `:is(input, select, textarea)` : la règle générale des champs de `mizan.css` (une largeur de 260 pixels, une marge)
   compte une balise ; la case aussi, et passe après. */
:is(input, select, textarea).lx-case { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; height: 36px; margin: 0; padding: 0 11px; border: 1px solid var(--mz-trait-fort); border-radius: var(--lx-r-case);
  background: var(--mz-surface); color: var(--mz-encre); font: inherit; font-size: 14px; font-weight: 400; transition: border-color .12s, box-shadow .12s, background .12s; }
.lx-case::placeholder { color: transparent; }
.lx-case:focus::placeholder { color: var(--mz-encre-tenue); }
.lx-case:focus { outline: none; border-color: var(--mz-vert); box-shadow: var(--lx-anneau); }
select.lx-case { padding-right: 28px; cursor: pointer; }
textarea.lx-case-longue { height: auto; min-height: 84px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
.lx-unite { position: relative; display: block; min-width: 0; }
/* une case vide reste blanche : son unité paraît avec sa valeur, ou au clic */
.lx-unite:has(input:placeholder-shown):not(:focus-within)::after { content: none; }
.lx-unite::after { content: attr(data-unite); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--mz-encre-tenue); pointer-events: none; }
.lx-unite > input.lx-case { padding-right: 34px; }
/* des boutons pour oui ou non et un choix court : un clic, et la réponse se voit */
.lx-segments { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border: 0; border-radius: 12px; background: var(--mz-champ); }
.lx-segments label { position: relative; display: inline-flex; cursor: pointer; }
.lx-segments input { position: absolute; min-width: 0; width: 100%; height: 100%; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lx-segments span { padding: 0 14px; line-height: 32px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--mz-encre-douce); white-space: nowrap; transition: background .12s, color .12s; }
.lx-segments label:hover span { color: var(--mz-encre); }
.lx-segments input:checked + span { background: var(--mz-surface); color: var(--mz-vert-fonce); font-weight: 600; box-shadow: var(--lx-ombre-pastille); }
.lx-segments input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--mz-vert); }

.lx-case[aria-invalid="true"] { border-color: var(--mz-rouge); background: var(--mz-rouge-clair); }
/* Un champ : le libellé au-dessus de sa case, la cause d'un refus dessous */
.lx-champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lx-champ .lx-segments { align-self: flex-start; max-width: 100%; }
.lx-segments.lx-refusee { box-shadow: inset 0 0 0 1px var(--mz-rouge); }
.lx-champ-erreur { font-size: 12px; line-height: 1.4; color: var(--mz-rouge); }
.lx-champ-lib { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--mz-encre-douce); }
.lx-champ-ligne { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mz-encre-douce); }
.lx-champ-ligne > span:first-child { white-space: nowrap; }
.lx-champ-ligne .lx-case { width: 120px; }
.lx-champ-ligne.lx-champ-large .lx-case { width: 300px; }
.lx-champ-ligne .lx-unite { width: 140px; }
.lx-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }

/* Un choix parmi des éléments, une ligne chacun */
.lx-coches { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lx-coches legend { margin-bottom: 6px; }
.lx-coches[hidden], .lx-coches label[hidden] { display: none; }
.lx-coches label { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--lx-trait); border-radius: var(--lx-r-case); background: var(--mz-surface); cursor: pointer; font-size: 14px; }
.lx-coches label:hover { border-color: var(--mz-trait-fort); }
.lx-coches label:has(input:checked) { border-color: var(--mz-vert); background: var(--lx-selection); }
.lx-coches input { min-width: 0; flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--mz-vert); }

/* La question et sa réponse ------------------------------------------------- */
.lx-question { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lx-question-texte { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--mz-encre); text-wrap: pretty; }
.lx-reponse { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; min-width: 0; }
.lx-reponse .lx-boutons > .lx-case, .lx-reponse .lx-boutons > .lx-unite { flex: 1 1 160px; width: auto; }
.lx-voix { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.lx-voix legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; }
.lx-voix .lx-champ-ligne .lx-case { width: 84px; }

/* Le tableau ---------------------------------------------------------------- */
.lx-tableau { position: relative; align-self: stretch; width: 100%; box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lx-tableau-defile { max-height: var(--lx-hauteur); overflow: hidden auto; border: 0; box-shadow: inset 0 0 0 1px var(--lx-trait-tableau); border-radius: var(--lx-r-fenetre); background: var(--mz-surface); }
.lx-tableau-defile:focus-visible { outline: 2px solid var(--mz-vert); outline-offset: 2px; }
.lx-tableau table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.4; }
.lx-tableau th { position: sticky; top: 0; z-index: 2; background: var(--mz-surface); text-align: left; vertical-align: bottom; padding: 10px 14px 8px;
  font-size: 12.5px; font-weight: 500; color: var(--mz-encre-tenue); border-bottom: 1px solid var(--lx-trait); }
.lx-tableau th.lx-nb { text-align: right; }
.lx-tableau td { padding: 10px 14px; border-bottom: 1px solid var(--lx-trait-doux); vertical-align: middle; background: var(--mz-surface); color: var(--mz-encre); }
.lx-tableau tbody tr:last-child td { border-bottom: 0; }
.lx-tableau tbody tr:hover td { background: var(--mz-survol-doux); }
.lx-tableau tfoot td { position: sticky; bottom: 0; font-weight: 600; background: var(--mz-tete); border-top: 1px solid var(--lx-trait); border-bottom: 0; }
.lx-cellule { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.lx-cellule > .lx-case, .lx-cellule > .lx-unite { flex: 1 1 0; width: auto; min-width: 104px; }
/* un nombre dans une colonne qui n'est pas de nombres (la valeur lue) : à gauche, son unité tout près */
.lx-tableau td:not(.lx-nb) .lx-cellule > .lx-case.lx-nb { text-align: left; }
.lx-tableau td:not(.lx-nb) .lx-cellule > .lx-unite { flex: 0 1 220px; }
.lx-cellule > .lx-sous, .lx-cellule > .lx-puces, .lx-cellule > .lx-details { flex-basis: 100%; }
.lx-cellule > .lx-coche ~ .lx-sous { padding-left: 28px; }
/* un nom sur deux lignes reste à côté de sa case : il prend la place qui reste et passe à la ligne dedans */
.lx-cellule > .lx-valeur-et-sous { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
.lx-tableau td.lx-avec-case .lx-cellule > .lx-coche ~ .lx-sous { padding-left: 34px; }
.lx-nb .lx-cellule { justify-content: flex-end; }
.lx-titre-ligne { font-weight: 500; min-width: 140px; }
.lx-titre-ligne .lx-cellule { flex-wrap: nowrap; }
.lx-titre-ligne .lx-cellule > .lx-valeur, .lx-titre-ligne .lx-cellule > .lx-lien-ligne { flex: 0 1 auto; min-width: 0; }
.lx-titre-ligne:has(.lx-sous, .lx-puces) .lx-cellule { flex-wrap: wrap; }
.lx-tableau td.lx-nb { white-space: nowrap; }
.lx-titre-ligne .lx-valeur { overflow-wrap: anywhere; }
.lx-lien-ligne { color: var(--mz-encre); font-weight: 500; text-decoration: none; }
.lx-lien-ligne:hover { text-decoration: underline; }
.lx-tableau .lx-sous { margin-top: 1px; }
.lx-tableau .lx-puces { display: flex; }
.lx-barree { color: var(--mz-encre-tenue); text-decoration-color: var(--mz-rouge); }
.lx-attenuee td { color: var(--mz-encre-tenue); }
/* une case modifiable sur place : à plat dans sa ligne, une case au survol et à la saisie */
.lx-tableau td.lx-avec-case { padding: 6px 10px; min-width: 120px; }
.lx-tableau td.lx-titre-ligne.lx-avec-case { min-width: 160px; }
.lx-tableau :is(input, select).lx-case { height: 34px; border-color: transparent; background: transparent; padding: 0 6px; }
.lx-tableau .lx-unite > input.lx-case { padding-right: 30px; }
.lx-tableau tr:hover .lx-case { border-color: var(--mz-trait); background: var(--mz-surface); }
.lx-tableau .lx-case:focus { border-color: var(--mz-vert); background: var(--mz-surface); }
.lx-tableau select.lx-case { appearance: none; background-image: none; padding-right: 6px; cursor: pointer; }
.lx-tableau tr:hover select.lx-case, .lx-tableau select.lx-case:focus { appearance: auto; padding-right: 2px; }
.lx-tableau .lx-segments span { line-height: 30px; padding: 0 10px; }
.lx-tableau td.lx-modifiee { background: var(--mz-vert-clair); }
.lx-tableau td.lx-modifiee .lx-case { font-weight: 600; color: var(--mz-vert-fonce); }
.lx-coche { flex: none; display: inline-flex; align-items: center; margin-right: 6px; vertical-align: middle; cursor: pointer; }
.lx-coche input { min-width: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--mz-vert); cursor: pointer; }
.lx-titre-ligne.lx-avec-case .lx-coche { margin: 0 2px 0 6px; }
/* une ligne décochée ne sera pas retenue : elle pâlit ; une valeur décochée seule aussi */
tr:has(> td:first-child > .lx-cellule > .lx-coche input:not(:checked)) td { color: var(--mz-encre-tenue); }
tr:has(> td:first-child > .lx-cellule > .lx-coche input:not(:checked)) .lx-case,
td:not(:first-child):has(> .lx-cellule > .lx-coche input:not(:checked)) .lx-case { color: var(--mz-encre-tenue); text-decoration: line-through; }
.lx-cellule > .lx-barree { flex-basis: 100%; font-size: 12.5px; padding-left: 2px; }
.lx-col-geste { width: 1%; text-align: center; padding: 0 6px !important; }
.lx-retirer { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--mz-encre-tenue); font-size: 18px; line-height: 1; cursor: pointer; }
.lx-retirer:hover { background: var(--mz-rouge-clair); color: var(--mz-rouge); }
.lx-source { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border: 1px solid var(--mz-trait-fort); border-radius: 50%;
  font-size: 10px; font-weight: 600; color: var(--mz-encre-tenue); cursor: help; vertical-align: 1px; }
.lx-source:hover, .lx-source:focus { border-color: var(--mz-vert); color: var(--mz-vert); outline: none; }
.lx-details summary { cursor: pointer; color: var(--mz-encre-douce); font-size: 13.5px; }
.lx-details[open] summary { margin-bottom: 8px; }
.lx-details-corps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; }
.lx-gestes-replies[open] .lx-gestes { margin-top: 2px; }
.lx-gestes form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
/* un choix avant l'envoi, dans une case de tableau : les cases en ligne, à la taille d'une étiquette */
.lx-gestes .lx-coches { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; }
/* lot DL · des choix courts côte à côte, hors d'une case de tableau (les formes d'un document) */
.lx-coches-en-ligne { flex-direction: row; flex-wrap: wrap; }
.lx-coches-en-ligne legend { flex-basis: 100%; }
.lx-coches-en-ligne label { padding: 6px 12px; gap: 8px; font-size: 13px; }
.lx-gestes .lx-coches legend { flex-basis: 100%; }
.lx-gestes .lx-coches label { padding: 4px 10px; gap: 6px; font-size: 13px; }
.lx-details-corps ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.6; }
/* lot C1 · une case qui manque, surlignée ; la ligne pointillée « + Ajouter un … » sous un tableau */
/* lot C1 · le pied du tableau d'un rôle (« N cases à compléter », « Valider ») reste visible quand la question défile */
.lx-pied-du-role { position: sticky; bottom: 0; z-index: 2; padding: 8px 0; background: var(--mz-surface); }
.lx-tableau td.lx-a-completer { background: var(--lx-ambre-fond); box-shadow: inset 0 0 0 1px var(--lx-ambre-trait); }
.lx-ajout-ligne { display: flex; align-items: center; min-height: 40px; margin-top: 8px; padding: 0 14px; border: 1px dashed var(--mz-trait-fort);
  border-radius: 8px; color: var(--mz-encre-douce); font-size: 14px; text-decoration: none; }
.lx-ajout-ligne:hover, .lx-ajout-ligne:focus-visible { border-color: var(--mz-vert); color: var(--mz-vert); outline: none; text-decoration: none; }
.lx-tableau-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* au survol d'un « ? », d'où vient la valeur (composants.js) */
.lx-bulle-info { position: fixed; z-index: 120; max-width: min(360px, calc(100vw - 24px)); padding: 9px 11px; border-radius: 8px; background: var(--mz-encre); color: var(--mz-surface);
  font-size: 12.5px; line-height: 1.45; box-shadow: var(--lx-ombre-flottante); pointer-events: none; }

/* La carte à confirmer ------------------------------------------------------- */
.lx-carte { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 0; padding: 16px 18px 0; border: 1px solid var(--mz-trait-fort); border-radius: var(--lx-r-cadre); background: var(--mz-surface); box-shadow: 0 1px 2px rgba(27, 26, 23, .05); min-width: 0; }
div.lx-carte { padding-bottom: 18px; }
.lx-carte-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lx-carte-tete h3 { margin: 2px 0 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; color: var(--mz-encre); }
.lx-carte-tete .lx-note { margin-top: 2px; }
.lx-carte-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lx-carte-section .lx-tableau { --lx-hauteur: min(48vh, 420px); }
.lx-carte-pied { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin: 0 -18px; padding: 10px 18px; border-top: 1px solid var(--lx-trait); background: var(--mz-survol-doux); border-radius: 0 0 var(--lx-r-cadre) var(--lx-r-cadre); }

/* Le tiroir ------------------------------------------------------------------ */
.lx-voile { position: fixed; inset: 0; z-index: 90; background: var(--lx-voile); }
.lx-tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--mz-surface); box-shadow: var(--lx-ombre-flottante);
  animation: lx-glisse .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes lx-glisse { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lx-tiroir { animation: none; } }
.lx-tiroir > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--mz-trait); }
.lx-tiroir h3 { margin: 0; font-size: 16px; font-weight: 600; }
.lx-tiroir-corps { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.lx-fermer { padding: 2px 9px; border-radius: 8px; font-size: 22px; line-height: 1; color: var(--mz-encre-douce); text-decoration: none; }
.lx-fermer:hover { background: var(--mz-survol-doux); }

/* Une page de la refonte, hors du fil : sa tête, puis ses cadres les uns sous les autres */
.lx-page { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* La page d'un formulaire seul : l'équipe, lancer une opération, le message au dirigeant, un refus */
.lx-page-etroite { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; width: 100%; }

/* L'ajout d'une personne en un geste : la fiche et le fil ------------------- */
.lx-ajout { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 0; }
.lx-ajout-nouvelle, .lx-champs-une { display: flex; flex-direction: column; gap: 12px; }
.lx-boutons-pied { justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--lx-trait); }
/* une personne connue choisie : les cases d'une nouvelle se taisent ; l'autre sorte de personne se cache */
.lx-ajout:has(input[name="connue"]:checked:not([value=""])) .lx-ajout-nouvelle { display: none; }
.lx-ajout:has(input[name="type"][value="physique"]:checked) .lx-ajout-societe,
.lx-ajout:has(input[name="type"][value="societe"]:checked) .lx-ajout-physique { display: none; }

/* À l'impression, les gestes s'effacent -------------------------------------- */
@media print {
  .lx-gestes, .lx-boutons, .lx-ligne-gestes, .lx-info-outils, .lx-tableau-outils, .lx-col-geste, .lx-carte-pied, [data-lx-non-imprime] { display: none !important; }
  .lx-tableau-defile { max-height: none; overflow: visible; border: 0; }
  .lx-tableau th { position: static; }
  .lx-cadre, .lx-carte { box-shadow: none; }
}

/* Lot K2 · un contrôle : son avis, et à confirmer, la case du motif et « Confirmer » */
.lx-controle { display: flex; flex-direction: column; gap: 8px; }
.lx-controle-motif > .lx-champ-ligne { flex: 1 1 260px; }
.lx-controle-motif .lx-champ-ligne .lx-case { flex: 1; width: auto; }

/* Lot K3 · le choix, à la place des listes brutes (composants.js) : un bouton qui dit le choix, une liste flottante,
   une recherche dès six choix, une coche devant le choix fait. La vraie liste reste, invisible, dans le formulaire. */
.lx-choix { position: relative; display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.lx-choix-plein { display: flex; width: 100%; }
select.lx-choix-natif { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; pointer-events: none; }
.lx-choix-bouton { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; height: 40px;
  margin: 0; padding: 0 10px 0 12px; border: 1px solid var(--lx-bord-case); border-radius: var(--lx-r-case); background: var(--mz-surface); color: var(--mz-encre);
  font: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; box-shadow: var(--lx-ombre-bouton); transition: border-color .12s, box-shadow .12s; }
.lx-choix-bouton:hover { border-color: var(--mz-trait-fort); background: var(--mz-surface); color: var(--mz-encre); }
.lx-choix-bouton:focus-visible, .lx-choix-bouton[aria-expanded="true"] { outline: none; border-color: var(--mz-vert); box-shadow: var(--lx-anneau); }
.lx-choix-bouton:disabled { opacity: .55; cursor: default; }
.lx-choix-bouton svg { flex: none; color: var(--mz-encre-douce); transition: transform .15s; }
.lx-choix-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
.lx-choix-mot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-choix-vide .lx-choix-mot { color: var(--mz-encre-tenue); }
select.lx-choix-natif[aria-invalid="true"] + .lx-choix-bouton { border-color: var(--mz-rouge); background: var(--mz-rouge-clair); }
/* dans une case de tableau : à plat dans sa ligne, comme les autres cases */
.lx-choix-cellule .lx-choix-bouton { height: 34px; border-color: transparent; background: transparent; box-shadow: none; padding: 0 6px; }
.lx-choix-cellule .lx-choix-bouton svg { opacity: 0; }
.lx-tableau tr:hover .lx-choix-cellule .lx-choix-bouton { border-color: var(--mz-trait); background: var(--mz-surface); }
.lx-tableau tr:hover .lx-choix-cellule .lx-choix-bouton svg, .lx-choix-cellule .lx-choix-bouton:focus-visible svg { opacity: 1; }
.lx-choix-liste { position: fixed; z-index: 3100; box-sizing: border-box; max-width: min(420px, calc(100vw - 24px)); max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: var(--lx-r-fenetre); background: var(--mz-surface); box-shadow: var(--lx-ombre-flottante); animation: lx-entre var(--lx-entree) var(--lx-courbe); }
.lx-choix-recherche { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 8px; height: 34px; margin: -6px -6px 4px; padding: 6px 16px; background: var(--mz-surface);
  color: var(--mz-encre-tenue); border-bottom: 1px solid var(--lx-trait-doux); }
.lx-choix-recherche input { flex: 1; min-width: 0; width: auto; height: 30px; margin: 0; padding: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 13.5px; color: var(--mz-encre); box-shadow: none; }
.lx-choix-opt[hidden], .lx-choix-groupe[hidden] { display: none; }
.lx-choix-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; height: auto; box-sizing: border-box; margin: 0; padding: 7px 10px;
  border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--mz-encre); font: inherit; font-size: 13.5px; font-weight: 400; text-align: left; cursor: pointer; }
.lx-choix-opt:hover, .lx-choix-opt.lx-choix-ici { background: var(--lx-selection); color: var(--mz-encre); }
.lx-choix-opt[aria-selected="true"] { font-weight: 500; }
.lx-choix-opt svg { flex: none; color: var(--mz-vert); }
.lx-choix-opt:disabled { opacity: .45; cursor: default; }
.lx-choix-texte { display: flex; flex-direction: column; min-width: 0; }
.lx-choix-texte small { font-size: 12px; font-weight: 400; color: var(--mz-encre-tenue); }
.lx-choix-groupe { padding: 8px 10px 4px; }
.lx-choix-rien { margin: 0; padding: 10px; font-size: 13px; color: var(--mz-encre-tenue); }
.lx-chargement-bloc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Lot K3 · le bandeau de progression : la progression et les documents cochés, sur une ligne */
.lx-progression-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.lx-progression-bandeau .lx-progression { flex: 1 1 260px; max-width: 440px; }
.lx-progression-docs { gap: 6px; margin: 0; }

/* Lot K3 · la barre du fil (`composants/barre.html`) : une pilule surélevée, le trombone et le micro dedans, l'envoi qui s'allume quand il y a quelque chose */
main.page .socle-fil.conv-v2 form.conv-compo { padding: 8px 16px 14px; border-top: 0; background: var(--lx-fond-fil); }
main.page .socle-fil.conv-v2 .conv-compo-in { gap: 4px; padding: 5px 5px 5px 6px; border-radius: 18px; background: var(--mz-surface); align-items: flex-end;
  box-shadow: var(--lx-ombre-barre); transition: box-shadow .15s; }
main.page .socle-fil.conv-v2 .conv-compo-in:focus-within { box-shadow: 0 0 0 1px var(--mz-vert), 0 0 0 4px var(--mz-vert-clair), var(--lx-ombre-barre); }
main.page .socle-fil.conv-v2 form.conv-compo textarea { border: 0; border-radius: 12px; background: transparent; box-shadow: none; font-size: var(--lx-t-texte); padding: 10px 8px; }
main.page .socle-fil.conv-v2 form.conv-compo textarea:focus { border: 0; box-shadow: none; }
main.page .socle-fil.conv-v2 form.conv-compo .conv-joindre { width: 40px; height: 40px !important; min-height: 40px; border: 0; border-radius: 12px; background: none; box-shadow: none; color: var(--mz-encre-douce); }
main.page .socle-fil.conv-v2 form.conv-compo .conv-joindre:hover { background: var(--mz-champ); color: var(--mz-encre); }
main.page .socle-fil.conv-v2 form.conv-compo .conv-envoyer { width: 44px; height: 44px !important; min-height: 44px; padding: 0 !important; justify-content: center; border-radius: 13px !important;
  box-shadow: var(--lx-ombre-envoi); transition: opacity .15s, background .15s, box-shadow .15s; }
main.page .socle-fil.conv-v2 form.conv-compo:has(textarea:placeholder-shown) .conv-envoyer,
main.page .socle-fil.conv-v2 form.conv-compo .conv-envoyer:disabled { background: var(--mz-champ); color: var(--mz-encre-tenue); box-shadow: none; }
main.page .socle-fil.conv-v2 form.conv-compo.conv-compo-pause { background: var(--lx-fond-fil); }
/* lot F3 · la précision de la barre au « ? », discrète, avant l'envoi */
.socle-fil .conv-compo-in > .bulle { align-self: center; margin: 0 6px; color: var(--mz-eteint); }
.socle-fil .conv-compo-in > .bulle:hover, .socle-fil .conv-compo-in > .bulle[open] { color: var(--mz-encre-douce); }

/* Lot K3 · les chiffres en tête d'une page : un cadre par chiffre */
.lx-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.lx-chiffre { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; background: var(--mz-surface); box-shadow: var(--lx-ombre); }
.lx-chiffre-lib { font-size: 13px; color: var(--mz-encre-douce); }
.lx-chiffre-v { display: flex; align-items: baseline; gap: 8px; }
.lx-chiffre-v b { font-size: 28px; font-weight: 650; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lx-chiffre-v small { font-size: var(--lx-t-note); color: var(--mz-encre-tenue); }
.lx-chiffre-vert .lx-chiffre-v b { color: var(--mz-vert); }
.lx-chiffre-ambre { background: var(--lx-ambre-fond); box-shadow: inset 0 0 0 1px var(--lx-ambre-trait); }
.lx-chiffre-ambre .lx-chiffre-lib { color: var(--mz-ambre-fonce); }
.lx-chiffre-ambre .lx-chiffre-v b { color: var(--mz-ambre); }
/* lot K4b · un tableau compact (la maquette de « Personnes et mandats ») : une ligne de 52 px, rien ne passe à la ligne ;
   les lignes de groupe ; ce qui manque en bouton pointillé, qui devient une case au clic ; le geste de la ligne au survol */
.lx-tableau[data-lx-compact] td { height: 52px; padding-top: 6px; padding-bottom: 6px; }
.lx-tableau[data-lx-compact] td .lx-cellule { flex-wrap: nowrap; gap: 6px 8px; }
.lx-tableau[data-lx-compact] td:has(.lx-sous) .lx-cellule { flex-wrap: wrap; row-gap: 1px; }
.lx-tableau[data-lx-compact] .lx-sous { flex-basis: 100%; margin: 0; }
.lx-tableau[data-lx-compact] .lx-avatar { width: 28px; height: 28px; font-size: 11px; background: var(--mz-champ); color: var(--mz-encre-douce); }
.lx-tableau[data-lx-compact] td.lx-titre-ligne .lx-cellule { flex-wrap: nowrap; gap: 10px; }
.lx-valeur-et-sous { display: flex; flex-direction: column; min-width: 0; }
.lx-valeur-et-sous .lx-sous { flex-basis: auto; }
.lx-tableau[data-lx-compact] :is(td, th) { padding-left: 10px; padding-right: 10px; }
.lx-tableau[data-lx-compact] .lx-case { height: 30px; width: 120px; flex: none; }
.lx-tableau[data-lx-compact] .lx-case.lx-nb { width: 80px; }
/* une cellule où l'on saisit plusieurs cases (une durée et sa précision) passe à la ligne le temps de la saisie */
.lx-tableau[data-lx-compact] td:has(.lx-manque-case:not([hidden])) { white-space: normal; padding-top: 6px; padding-bottom: 6px; }
.lx-tableau[data-lx-compact] td:has(.lx-manque-case:not([hidden])) .lx-cellule { flex-wrap: wrap; }
.lx-tableau[data-lx-compact] .lx-choix-cellule .lx-choix-bouton { height: 30px; width: 160px; border-color: var(--mz-vert); background: var(--mz-surface); }
.lx-tableau[data-lx-compact] .lx-choix-cellule .lx-choix-bouton svg { opacity: 1; }
.lx-tableau[data-lx-compact] .lx-manque-case .lx-case:is(input, select) { border-color: var(--mz-vert); box-shadow: var(--lx-anneau); background: var(--mz-surface); }
.lx-groupe td { height: 38px; padding: 0 14px; background: var(--mz-surface); font-size: 12.5px; font-weight: 600; color: var(--mz-encre-douce); border-bottom: 1px solid var(--lx-trait); }
.lx-groupe .lx-compte { margin-left: 6px; }
.lx-groupe .lx-lien { margin-left: 8px; font-weight: 500; }
.lx-manque-bloc { display: inline-flex; align-items: center; gap: 6px; }
.lx-manque-case { display: inline-flex; align-items: center; gap: 6px; }
.lx-manque-case[hidden], .lx-manque[hidden] { display: none; }
.lx-manque { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--mz-trait-fort);
  background: var(--mz-surface); color: var(--mz-encre-douce); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.lx-manque:hover, .lx-manque:focus-visible { border-color: var(--mz-vert); color: var(--mz-vert); outline: none; text-decoration: none; }
.lx-bouton-ligne { margin-left: auto; }
.lx-tableau tr:not(:hover):not(:focus-within) .lx-bouton-ligne:not(.lx-toujours) { opacity: 0; }
/* lot K4b · la barre d'enregistrement, collée au bas du tableau, seulement quand une case a changé */
.lx-enregistrer { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 14px; background: var(--mz-vert-clair); border-top: 1px solid var(--lx-trait); font-size: 13px; color: var(--mz-vert-fonce); }
.lx-enregistrer[hidden] { display: none; }
/* lot K4b · un filtre qui mène à une page (un rangement) : celui de la page ouverte est plein */
.lx-filtre[aria-current="page"] { background: var(--mz-encre); border-color: var(--mz-encre); color: var(--mz-surface); }
a.lx-filtre { text-decoration: none; }
/* lot K4 · un chiffre de ce qui est dépassé */
.lx-chiffre-rouge { background: var(--mz-rouge-clair); box-shadow: inset 0 0 0 1px var(--lx-rouge-trait); }
.lx-chiffre-rouge .lx-chiffre-lib { color: var(--lx-rouge-encre); }
.lx-chiffre-rouge .lx-chiffre-v b { color: var(--mz-rouge); }
/* Lot K3 · les filtres d'un tableau : des pilules, celle qui est choisie en encre */
.lx-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-filtre { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--lx-bord-case); border-radius: 999px; background: var(--mz-surface);
  color: var(--mz-encre-douce); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: none; transition: background .15s, color .15s, border-color .15s; }
.lx-filtre:hover { border-color: var(--mz-trait-fort); color: var(--mz-encre); background: var(--mz-surface); }
.lx-filtre[aria-pressed="true"] { background: var(--mz-encre); border-color: var(--mz-encre); color: var(--mz-surface); }
.lx-filtre:focus-visible { outline: none; box-shadow: var(--lx-anneau); }
tr[data-lx-filtre-cache], tr[data-lx-recherche-cache] { display: none; }
/* lot S1 · la recherche d'un tableau, au bout de ses filtres */
.lx-recherche { margin-left: auto; }
/* dans un formulaire de cases à cocher, la recherche tient toute la largeur, alignée sur les cases */
.lx-reponse > .lx-recherche { margin-left: 0; }
.lx-reponse > .lx-recherche input { width: 100%; }
.lx-recherche input { height: 34px; width: min(260px, 100%); padding: 0 14px; border: 1px solid var(--lx-bord-case); border-radius: 999px; background: var(--mz-surface);
  color: var(--mz-encre); font: inherit; font-size: var(--lx-t-note); }
.lx-recherche input:focus { outline: none; border-color: var(--mz-vert); box-shadow: var(--lx-anneau); }
/* Lot K3 · une part en barre dans une case de tableau (la part du capital) */
.lx-barre-cellule { flex: 0 0 120px; height: 6px; min-width: 60px; margin-right: 10px; }
.lx-nb .lx-cellule:has(.lx-barre-cellule) { justify-content: flex-end; flex-wrap: nowrap; }

/* Lot K3 · une partie d'un cadre, sous un trait : son titre au dessin de celui du cadre */
.lx-sous-partie { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--lx-trait-doux); }
.lx-sous-partie > .lx-cadre-tete { padding: 0; }
.lx-progression-docs-replies[open] { flex-basis: 100%; }
.lx-progression-docs-replies > summary { list-style: none; cursor: pointer; }
.lx-progression-docs-replies > summary::-webkit-details-marker { display: none; }
.lx-progression-docs-replies > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lx-progression-docs-replies[open] > summary { margin-bottom: 8px; }
.lx-progression-docs-replies[open] .lx-progression-docs { max-height: 30vh; overflow-y: auto; }

/* Lot K3 · le fil (`fil.html`) : ses bulles (le cabinet en gris chaud), ses avatars, le jour qui change ; un message qui
   arrive monte de 6 px et apparaît ; une carte tranchée se replie en sa ligne. Lot F3 · une seule surface blanche, sans
   cadre autour du fil : l'espace sépare, seules les cartes gardent leur bord. */
body:has(.socle-fil), main.page.conv-blanc:has(.socle-fil) { background: var(--mz-surface); }
.socle-fil .conv-fil { border: 0; border-radius: 0; background: var(--mz-surface); box-shadow: none; }
.socle-fil .conv-fil-haut { border-bottom-color: var(--lx-trait-doux); }
.socle-fil .conv-messages, .socle-fil .conv-attente.conv-attente-q { background: var(--lx-fond-fil); }
.socle-fil .conv-attente.conv-attente-q { border: 0; border-top: 1px solid var(--lx-trait-doux); border-radius: 0; }
.socle-fil .conv-attente-q .conv-attendue { color: var(--mz-vert); }
.socle-fil .conv-neuf { animation: lx-entre var(--lx-entree) var(--lx-courbe) both; }
@keyframes lx-replie { from { opacity: 0; transform: scaleY(.7); } }
.socle-fil .conv-av { width: 30px; height: 30px; border-radius: 10px; font-size: 13px; }
.socle-fil .conv-av-moi { background: var(--mz-encre); border-radius: 999px; font-size: 11px; font-weight: 600; }
.socle-fil .conv-av-signal { background: var(--mz-ambre-clair); color: var(--mz-ambre); }
.socle-fil .conv-lexia > .conv-bulle { background: var(--mz-surface); border-radius: 4px 16px 16px 16px; padding: 13px 16px; font-size: var(--lx-t-texte); line-height: 1.55; box-shadow: var(--lx-ombre-bulle); }
.socle-fil .conv-court.conv-lexia > .conv-bulle { padding: 8px 14px; font-size: 13.5px; color: var(--mz-encre-douce); box-shadow: var(--lx-trait-bulle); }
.socle-fil .conv-moi .conv-bulle { background: var(--lx-bulle-cabinet); color: var(--mz-encre); border-radius: 16px 4px 16px 16px; padding: 9px 14px; }
.socle-fil .conv-message .conv-bulle { padding: 11px 15px; font-size: var(--lx-t-texte); line-height: 1.55; }
.socle-fil .conv-qui { display: block; font-size: 12px; color: var(--mz-encre-tenue); }
.socle-fil .conv-intro { font-size: 15px; }
.socle-fil .conv-afournir { border: 0; background: var(--lx-ambre-fond); box-shadow: none; color: var(--lx-ambre-encre); }   /* lot F3 : le fond suffit */
.socle-fil .conv-ecrit-msg .conv-bulle { min-width: 260px; }
.conv-ecrit-mot { font-size: 13px; color: var(--mz-encre-douce); }
/* Lots F1 et F2 · le fil en chat (`lots/LOT-F1-le-fil-en-chat.md`) : Lexia parle sans bulle ; la question en cours,
   un message de Lexia sur un fond vert très clair ; la question répondue, un vrai message ; ce que fait Lexia, une ligne
   qui scintille ; l'envoi devenu « Arrêter », un carré, pendant qu'elle lit un message. */
.socle-fil .conv-lexia > .conv-bulle, .socle-fil .conv-court.conv-lexia > .conv-bulle { background: none; box-shadow: none; border-radius: 0; padding: 4px 0 0; }
.socle-fil .conv-attente.conv-question-lexia { border: 0; border-radius: 6px 16px 16px 16px; background: color-mix(in srgb, var(--mz-vert-clair) 55%, var(--mz-surface)); }
.socle-fil .conv-question-lexia .lx-question-texte { font-size: 16px; font-weight: 600; line-height: 1.45; }
.socle-fil .conv-question-lexia .btn:not(.btn-plein) { background: var(--mz-surface); }
.socle-fil .conv-question-posee > .conv-bulle p { font-size: var(--lx-t-texte); color: var(--mz-encre); }
.socle-fil .conv-ecrit-msg .conv-ecrit { display: none; }
.socle-fil .conv-ecrit-mot { background: linear-gradient(90deg, var(--mz-encre-tenue) 35%, var(--mz-encre) 50%, var(--mz-encre-tenue) 65%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: conv-scintille 1.6s linear infinite; }
@keyframes conv-scintille { from { background-position: 100% 0; } to { background-position: 0 0; } }
.socle-fil .conv-lexia.conv-ecrit-msg > .conv-av.conv-av-reflechit { visibility: visible; background: none; }   /* lot F3 : les points à la place du logo */
.socle-fil .conv-ecrit-msg > .conv-bulle { display: flex; flex-direction: row; align-items: center; min-width: 0; min-height: 30px; padding-top: 0; }
main.page .socle-fil.conv-v2[data-arret] [data-maj="message"] > form:has(textarea) .conv-envoyer { background: var(--mz-encre); color: var(--mz-surface); }
.socle-fil[data-arret] [data-maj="message"] > form .conv-envoyer svg { display: none; }
.socle-fil[data-arret] [data-maj="message"] > form .conv-envoyer::before { content: ""; width: 12px; height: 12px; border-radius: 2px; background: currentColor; }
@media (prefers-reduced-motion: reduce) { .socle-fil .conv-ecrit-mot { animation: none; color: var(--mz-encre-douce); } }
/* le jour qui change, entre deux traits */
.lx-jour { display: flex; align-items: center; gap: 12px; color: var(--mz-encre-tenue); font-size: 12px; font-weight: 500; }
.lx-jour::before, .lx-jour::after { content: ""; flex: 1; height: 1px; background: var(--mz-trait); }
/* une tuile d'un résumé : un libellé, une valeur, sur un fond à peine plus sombre que son cadre */
.lx-tuile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--lx-tuile); }

/* Lot K3 · le papier : la feuille d'un document à lire (l'aperçu du fil, le modèle ouvert), ses trous surlignés avec
   leur libellé, ce qui manque encore en ambre, ses cas (« Seulement si… », « Sinon », « Pour chaque… ») en encadrés,
   ce qu'un cas gouverne en retrait. La feuille de la maquette « Modèles ». */
.lx-papier { box-sizing: border-box; min-width: 0; padding: 26px 34px 34px; border-radius: var(--lx-r-fenetre); background: var(--mz-surface); box-shadow: var(--lx-ombre);
  font-size: var(--lx-t-texte); line-height: 1.75; color: var(--mz-encre); overflow-wrap: anywhere; }
.lx-papier p { margin: 0 0 10px; max-width: none; }
.lx-papier-nom { font-weight: 700; letter-spacing: .02em; text-align: center; text-transform: uppercase; }
.lx-papier-gestes { margin-bottom: 14px; }
.lx-papier-centre { text-align: center; }
.lx-papier-droite { text-align: right; }
.lx-papier-gras { font-weight: 700; }
.lx-trou { display: inline; padding: 1px 7px; margin: 0 1px; border-radius: 7px; background: var(--lx-selection); color: var(--mz-encre); font-weight: 500; font-size: .93em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lx-trou[title] { cursor: help; }
.lx-trou-manque { background: var(--mz-ambre-clair); color: var(--mz-ambre-fonce); }
.lx-papier-cas { margin: 14px 0 0 !important; }
.lx-papier-cas > span, .lx-papier-cas-en-ligne { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--mz-surface);
  box-shadow: 0 0 0 1px var(--lx-cas-trait); font-size: 11.5px; font-weight: 600; line-height: 1.6; color: var(--mz-encre-douce); }
/* ce qu'un cas ou une répétition gouverne : un encadré, en retrait selon sa profondeur */
:is(.lx-papier-n1, .lx-papier-n2, .lx-papier-n3, .lx-papier-n4, .lx-papier-n5, .lx-papier-n6):not(.lx-papier-cas) { margin-top: 0; margin-bottom: 0; padding: 6px 14px; background: var(--lx-cas);
  box-shadow: inset 2px 0 0 var(--lx-cas-trait); }
.lx-papier-cas:is(.lx-papier-n1, .lx-papier-n2, .lx-papier-n3, .lx-papier-n4, .lx-papier-n5, .lx-papier-n6) { margin-bottom: 6px !important; }
.lx-papier .lx-papier-n2 { margin-left: 16px; } .lx-papier .lx-papier-n3 { margin-left: 32px; } .lx-papier .lx-papier-n4 { margin-left: 48px; }
.lx-papier .lx-papier-n5, .lx-papier .lx-papier-n6 { margin-left: 64px; }
/* Othmane, 2026-11-01 · un tableau du Word d'un seul tenant : sa grille, sa ligne de titre, ses largeurs ; la ligne
   qui se répète teintée, un filet au bord, et dite sous le tableau ; six colonnes ou plus se resserrent plutôt que de
   défiler de côté (maquette `lots/maquettes/tableaux-de-l-editeur/`) */
.lx-papier-tableau { width: 100%; margin: 6px 0 14px; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; line-height: 1.5; }
.lx-papier-cellule { padding: 7px 10px; border: 1px solid var(--lx-grille); background: var(--mz-surface); vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.lx-papier-cellule p { margin: 0 !important; text-align: left; }
.lx-papier-cellule p.lx-papier-centre { text-align: center; } .lx-papier-cellule p.lx-papier-droite { text-align: right; }
.lx-papier-fond { background: var(--lx-titre); font-size: 12.5px; }
.lx-papier-sans-traits .lx-papier-cellule { border-color: transparent; padding-left: 0; background: none; }
.lx-papier-dense { font-size: 12.5px; } .lx-papier-dense .lx-papier-cellule { padding: 6px; }
.lx-papier-repetee .lx-papier-cellule { background: linear-gradient(var(--lx-repete), var(--lx-repete)), var(--mz-surface); }
.lx-papier-repetee .lx-papier-cellule:first-child { box-shadow: inset 3px 0 0 var(--ap-orange, var(--mz-ambre)); }
.lx-papier-sans-traits .lx-papier-repetee .lx-papier-cellule { padding-left: 12px; }
.lx-papier .lx-papier-tableau + .lx-papier-repetition, .lx-papier .lx-papier-repetition + .lx-papier-repetition { margin: -8px 0 14px !important; }
.lx-papier .lx-papier-repetition > span { height: auto; min-height: 22px; white-space: normal; }
.lx-papier.ed-actif .lx-papier-sans-traits .lx-papier-cellule { border: 1px dashed var(--lx-grille-vide); padding-left: 10px; }
.lx-papier.ed-actif .lx-papier-cellule { cursor: text; }
/* Othmane, 2026-11-01 · la ligne gardée seulement dans un cas : un filet orange en pointillé ; dans la marge, ↻ pour la
   ligne qui se répète, « si » pour la ligne sous condition */
.lx-papier-sous-condition .lx-papier-cellule:first-child { background-image: linear-gradient(var(--ap-orange, var(--mz-ambre)) 50%, transparent 0);
  background-size: 3px 8px; background-repeat: repeat-y; background-position: left; }
.lx-papier-repetee.lx-papier-sous-condition .lx-papier-cellule:first-child { background-image: none; }
.lx-papier-cellule:first-child { position: relative; }
.lx-papier-reperes { position: absolute; left: -38px; top: 50%; display: flex; flex-direction: column; gap: 3px; transform: translateY(-50%); }
.lx-papier-repere { display: grid; place-items: center; width: 24px; height: 18px; border-radius: 999px; background: var(--ap-orange-clair, var(--mz-ambre-clair));
  color: var(--mz-ambre-fonce); font-size: 10.5px; font-weight: 700; line-height: 1; }
.lx-papier-repere .lx-ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lx-papier.ed-actif .lx-papier-repere { cursor: pointer; }
.lx-papier.ed-actif .lx-papier-repere:hover { background: var(--ap-orange, var(--mz-ambre)); color: var(--mz-surface); }

/* Lot S1 · la frise d'une opération ------------------------------------------------
   Trois temps alignés d'une ligne à l'autre (la préparation, la signature, les formalités), un point par étape relié
   au suivant ; faite : plein vert ; l'étape courante : cerclée d'ambre ; en retard : rouge ; sans objet : pointillé.
   Les mêmes fractions servent l'en-tête de la colonne (`.lx-frise-entete`). */
.lx-frise, .lx-frise-entete { display: grid; grid-template-columns: 4fr 3fr 5fr; gap: 14px; min-width: 420px; width: 100%; }
.lx-frise-entete > span { white-space: nowrap; }
.lx-frise-temps { min-width: 0; }
.lx-frise-etapes { display: flex; flex-direction: row; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; min-height: 36px; }
.lx-etape { display: block; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; position: relative; }
.lx-etape > a, .lx-etape > span { display: grid; justify-items: center; gap: 5px; color: inherit; text-decoration: none; }
.lx-etape::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--lx-gris-clair); }
.lx-etape:first-child::before { display: none; }
.lx-etape[data-relie]::before { background: var(--mz-vert); }
.lx-point { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 999px; background: var(--mz-surface); border: 2px solid var(--mz-trait-fort);
  transition: transform var(--lx-entree) var(--lx-courbe); }
.lx-etape a:hover .lx-point { transform: scale(1.15); }
.lx-etape a:focus-visible { outline: none; }
.lx-etape a:focus-visible .lx-point { box-shadow: var(--lx-anneau); }
.lx-etape small { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.25; color: var(--mz-encre-tenue); }
.lx-etape[data-etat="faite"] .lx-point { background: var(--mz-vert); border-color: var(--mz-vert); }
.lx-etape[data-etat="faite"] small { color: var(--mz-encre-douce); }
.lx-etape[data-courante] .lx-point { border-color: var(--mz-ambre); box-shadow: 0 0 0 4px var(--mz-ambre-clair); }
.lx-etape[data-etat="en_retard"] .lx-point { background: var(--mz-rouge); border-color: var(--mz-rouge); box-shadow: 0 0 0 4px var(--mz-rouge-clair); }
.lx-etape[data-courante] small, .lx-etape[data-etat="en_retard"] small { color: var(--mz-encre); font-weight: 600; }
.lx-etape[data-etat="sans_objet"] .lx-point { border-style: dashed; border-color: var(--mz-encre-tenue); }
.lx-etape a[aria-current="step"] .lx-point { outline: 2px solid var(--mz-encre); outline-offset: 3px; }
.lx-frise-grande { padding: 16px 16px 12px; border-radius: 16px; background: var(--lx-survol); box-shadow: inset 0 0 0 1px var(--lx-trait); }
.lx-frise-grande .lx-etiquette { margin-bottom: 12px; }
.lx-frise-grande .lx-etape small { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: auto; font-size: 11.5px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; text-align: center; }
/* une ligne en retard : un trait rouge au bord */
.lx-tableau tr.lx-alerte td:first-child { box-shadow: inset 3px 0 0 var(--mz-rouge); }
/* un chiffre qui filtre la page au clic */
a.lx-chiffre-lien { color: inherit; text-decoration: none; transition: box-shadow var(--lx-entree) var(--lx-courbe), transform var(--lx-entree) var(--lx-courbe); }
a.lx-chiffre-lien:hover { transform: translateY(-1px); box-shadow: var(--lx-ombre-haute); }
a.lx-chiffre-lien:focus-visible { outline: none; box-shadow: var(--lx-anneau); }
a.lx-chiffre-lien[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mz-encre); }
.lx-chiffre-v small.lx-chiffre-alerte { color: var(--lx-rouge-etat); font-weight: 500; }
/* « Chez nous » : l'encre, le travail est chez le cabinet */
.lx-etat-encre { background: var(--mz-encre); color: var(--mz-surface); }
/* le tiroir d'une opération, plus large, sa frise en tête */
.lx-tiroir-large { width: min(760px, 100%); }
.lx-tiroir > header .lx-sous { margin-top: 2px; }
.lx-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .lx-deux { grid-template-columns: 1fr; } }
/* des chiffres sans cadre, en tête d'un encart (les échéances du tableau de bord) */
.lx-chiffres-petits { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.lx-chiffres-petits .lx-chiffre { padding: 0; background: none; box-shadow: none; flex-direction: column-reverse; gap: 0; }
.lx-chiffres-petits .lx-chiffre-v b { font-size: 22px; }
.lx-chiffres-petits .lx-chiffre-lib { font-size: 11.5px; color: var(--mz-encre-douce); }
.lx-chiffres-petits .lx-chiffre-rouge .lx-chiffre-v b { color: var(--lx-rouge-etat); }
.lx-chiffres-petits .lx-chiffre-ambre .lx-chiffre-v b { color: var(--mz-encre); }

/* Lot C7 · la vignette « ajouter une personne », dans la carte de la question d'un rôle : repris tel quel de la
   maquette validée le 2026-10-25 (`lots/maquettes/ajouter-une-personne/vignette.css`), sur les jetons de Lexia. */
.vg-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.vg-ligne { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--mz-surface, #fff); border: 1px solid var(--lx-trait-tableau); border-radius: var(--lx-r-case); }
.vg-ligne.vg-arrive { animation: vg-entree var(--lx-repli) var(--lx-courbe); }
@keyframes vg-entree { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.vg-init { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--mz-encre-douce); background: linear-gradient(var(--lx-marque-haut), var(--lx-marque-bas)); }
.vg-qui { flex: 1; min-width: 0; display: grid; }
.vg-qui strong { font-size: var(--lx-t-texte); font-weight: 600; }
.vg-qui span { font-size: var(--lx-t-note); color: var(--mz-encre-douce); }
.vg-etat { font-size: var(--lx-t-etiquette); font-weight: 600; letter-spacing: .02em; padding: 3px 8px; border-radius: var(--lx-r-rond); background: var(--mz-vert-clair); color: var(--mz-vert-fonce); white-space: nowrap; }
.vg-etat.vg-manque { background: var(--lx-ambre-fond); color: var(--lx-ambre-encre); box-shadow: inset 0 0 0 1px var(--lx-ambre-trait); }
.vg-ligne .lien { font-size: var(--lx-t-note); background: none; border: 0; cursor: pointer; padding: 2px 4px; color: var(--mz-encre-douce); }
.vg-ligne .lien:hover { color: var(--mz-encre); text-decoration: underline; }
.vg-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 12px; }
.vg-pied { margin-top: 14px; }

.vg-vignette { margin-top: 12px; background: var(--mz-surface, #fff); border: 1px solid var(--lx-bord-case); border-radius: var(--lx-r-fenetre); box-shadow: var(--lx-ombre-haute); padding: 14px 16px 12px; animation: vg-entree var(--lx-repli) var(--lx-courbe); }
.vg-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vg-tete h4 { margin: 0; font-size: var(--lx-t-cadre); font-weight: 600; }
.vg-depart { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: stretch; }
.vg-chercher { flex: 1 1 220px; min-width: 0; }
.vg-chercher { position: relative; }
.vg-chercher input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border: 1px solid var(--lx-bord-case); border-radius: var(--lx-r-case); font: inherit; font-size: 14px; background: #fff; }
.vg-chercher input:focus { outline: none; box-shadow: var(--lx-anneau); border-color: var(--mz-vert-trait); }
.vg-suggestions { position: absolute; z-index: 5; left: 0; right: 0; top: 42px; margin: 0; padding: 4px; list-style: none; background: #fff; border-radius: var(--lx-r-case); box-shadow: var(--lx-ombre-flottante); }
.vg-suggestions li button { all: unset; box-sizing: border-box; width: 100%; display: grid; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.vg-suggestions li button:hover, .vg-suggestions li button:focus-visible { background: var(--lx-survol); }
.vg-suggestions li button[disabled] { opacity: .5; cursor: default; }
.vg-suggestions small { color: var(--mz-encre-douce); font-size: 12px; }
.vg-depot { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px dashed var(--mz-vert-trait); border-radius: var(--lx-r-case); background: var(--mz-vert-clair); color: var(--mz-vert-fonce); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.vg-depot:hover { border-style: solid; }
.vg-ou { font-size: var(--lx-t-note); color: var(--mz-encre-douce); margin: 8px 0 0; }
.vg-ou button { font: inherit; background: none; border: 0; padding: 0; color: var(--mz-vert-fonce); text-decoration: underline; cursor: pointer; }
.vg-lecture { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--lx-r-case); background: var(--rf-ia-clair, #F1ECF8); color: var(--rf-ia, #5B3F8C); font-size: 13.5px; }
.vg-roue { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: vg-tour .8s linear infinite; }
@keyframes vg-tour { to { transform: rotate(360deg); } }
.vg-source { margin-top: 12px; font-size: var(--lx-t-note); color: var(--mz-encre-douce); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vg-puce { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--lx-r-rond); background: var(--lx-tuile); border: 1px solid var(--lx-trait-doux); color: var(--mz-encre-douce); }
.vg-groupe { margin-top: 14px; }
.vg-groupe > p { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--mz-encre-douce); }
.vg-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; }
.vg-case { display: grid; gap: 4px; min-width: 0; align-content: end; }
.vg-case label, .vg-case .vg-lib { font-size: 12.5px; color: var(--mz-encre-douce); display: flex; gap: 6px; align-items: baseline; }
.vg-case label em, .vg-case .vg-lib em { font-style: normal; font-size: 11px; color: var(--rf-ia, #5B3F8C); }
.vg-case input, .vg-case select { height: 36px; padding: 0 10px; border: 1px solid var(--lx-bord-case); border-radius: var(--lx-r-case); font: inherit; font-size: 14px; background: #fff; min-width: 0; }
.vg-case input:focus, .vg-case select:focus { outline: none; box-shadow: var(--lx-anneau); border-color: var(--mz-vert-trait); }
.vg-case.vg-vide input, .vg-case.vg-vide select, .vg-case.vg-vide .vg-seg { background: var(--lx-ambre-fond); border-color: var(--lx-ambre-trait); }
.vg-case.vg-lu input { background: var(--lx-gris-lueur); }
.vg-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--lx-bord-case); border-radius: var(--lx-r-case); background: var(--lx-tuile); width: max-content; max-width: 100%; flex-wrap: wrap; }
.vg-seg button { font: inherit; font-size: 13px; border: 0; background: none; padding: 5px 10px; border-radius: 7px; cursor: pointer; color: var(--mz-encre-douce); }
.vg-seg button[aria-pressed="true"] { background: #fff; color: var(--mz-encre); box-shadow: var(--lx-ombre-pastille); font-weight: 500; }
.vg-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lx-trait-doux); }
.vg-bas .lx-note { margin: 0; }
.vg-bas .vg-actions { display: flex; gap: 8px; margin-left: auto; }
.vg-rien { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--lx-r-case); background: var(--mz-vert-clair); color: var(--mz-vert-fonce); font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .vg-vignette, .vg-ligne.vg-arrive, .vg-roue { animation: none; } }

.vg-outils[hidden], .vg-suggestions[hidden], .vg-pied[hidden] { display: none !important; }

.vg-depot.vg-main { border-style: solid; border-color: var(--lx-bord-case); background: #fff; color: var(--mz-encre); }
.vg-depot.vg-main:hover { background: var(--lx-survol); }

.vg-case input[hidden] { display: none; }
/* lot E2 · « Aucune » à côté d'une case qu'un document lit derrière « est rempli » ; choisi, « Aucune · changer »
   (maquette validée le 2026-10-25, `lots/maquettes/aucune/`) */
.vg-saisie { display: flex; gap: 6px; align-items: center; min-width: 0; }
.vg-saisie input { flex: 1; min-width: 0; }
.vg-btn-aucune { font: inherit; font-size: 12.5px; height: 36px; padding: 0 10px; border: 1px solid var(--lx-bord-case); border-radius: var(--lx-r-case); background: var(--mz-surface); color: var(--mz-encre-douce); cursor: pointer; white-space: nowrap; }
.vg-btn-aucune:hover { background: var(--lx-survol); color: var(--mz-encre); }
.vg-pil-aucune { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--lx-r-case); background: var(--lx-tuile); border: 1px dashed var(--lx-bord-case); color: var(--mz-encre-douce); font-size: 13.5px; width: max-content; }
.vg-pil-aucune button { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: var(--mz-vert-fonce); text-decoration: underline; cursor: pointer; }
.vg-saisie[hidden], .vg-pil-aucune[hidden], .vg-btn-aucune[hidden] { display: none; }
.vg-zone-attend { opacity: .6; pointer-events: none; }
/* la carte d'un rôle n'est pas un formulaire en colonne, ses lignes prennent toute la largeur */
.vg-question { display: block; }
.vg-liste .vg-ligne { max-width: none; }


/* ---------------------------------------------------------------------------
   Lot E1 · l'éditeur des modèles, sur la page du modèle ouvert (`editeur.js`) : la maquette validée par Othmane le
   2026-10-25 (`lots/maquettes/editeur-de-modeles/editeur.css`), sur les jetons de Lexia. La carte de la version, le
   bandeau du papier, le papier qui s'édite, la condition « si… », la colonne « Champs » et sa création. */
.ed-version { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ed-liens { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.ed-boutons { display: flex; gap: 8px; flex-wrap: wrap; }

.ed-bandeau-papier { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--lx-r-case); background: var(--mz-vert-clair); color: var(--mz-vert-fonce); font-size: 13.5px; }
.ed-bandeau-papier.ed-pour-tous { background: var(--rf-ia-clair); color: var(--rf-ia); }

.lx-papier.ed-actif { outline: 2px dashed var(--mz-vert-trait); outline-offset: 6px; }
.lx-papier.ed-actif p[contenteditable="true"] { position: relative; border-radius: 6px; cursor: text; }
.lx-papier.ed-actif p[contenteditable="true"]:hover { background: var(--lx-survol); }
.lx-papier.ed-actif p[contenteditable="true"]:focus { outline: none; background: var(--mz-surface); box-shadow: 0 0 0 2px var(--mz-vert-clair); }
.lx-papier.ed-actif .lx-trou { cursor: grab; position: relative; }
.lx-papier.ed-actif .lx-trou .ed-x { display: none; position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; border-radius: 50%; background: var(--mz-encre); color: #fff; font-size: 10px; line-height: 15px; text-align: center; cursor: pointer; }
.lx-papier.ed-actif .lx-trou:hover .ed-x { display: block; }
.lx-papier .lx-trou.ed-ajoute { box-shadow: inset 0 0 0 1.5px var(--mz-vert); }
.lx-papier p.ed-modifie { box-shadow: inset 3px 0 0 var(--mz-vert); }
.lx-papier .ed-cas-ajoute span { box-shadow: inset 0 0 0 1.5px var(--mz-vert); }
.lx-papier .ed-ici { display: inline-block; width: 2px; height: 1.1em; vertical-align: text-bottom; background: var(--mz-vert); }
.ed-plus-cas { position: absolute; left: -34px; top: 2px; display: none; width: 26px; height: 22px; border-radius: 6px; border: 1px solid var(--lx-bord-case); background: var(--mz-surface); color: var(--mz-encre-douce); font-size: 12px; cursor: pointer; }
.lx-papier.ed-actif p[contenteditable="true"]:hover .ed-plus-cas { display: block; }
.ed-form select, .ed-form input { height: 34px; padding: 0 10px; border: 1px solid var(--lx-bord-case); border-radius: var(--lx-r-case); font: inherit; font-size: 13.5px; background: var(--mz-surface); min-width: 0; }

.ed-chercher { height: 36px; padding: 0 12px; border: 1px solid var(--lx-bord-case); border-radius: var(--lx-r-case); font: inherit; font-size: 14px; width: 100%; box-sizing: border-box; }
.ed-chercher:focus, .ed-form :focus { outline: none; box-shadow: var(--lx-anneau); border-color: var(--mz-vert-trait); }
.ed-liste { max-height: 46vh; overflow: auto; margin: 0 -6px; padding: 0 6px; display: grid; gap: 12px; }
.ed-groupe > p { font-size: 12px !important; font-weight: 500; margin: 0 0 6px !important; }
.ed-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-champ { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: var(--lx-tuile); border: 1px solid var(--lx-trait-doux); font-size: 13px; cursor: grab; user-select: none; }
.ed-champ:hover { background: var(--mz-surface); box-shadow: var(--lx-ombre-pastille); }
.ed-champ em { font-style: normal; font-size: 10.5px; color: var(--mz-encre-douce); }
.ed-champ.ed-du-cab { background: var(--mz-vert-clair); border-color: transparent; }
.ed-champ.ed-du-cab em { color: var(--mz-vert-fonce); font-weight: 600; }
.ed-astuce { font-size: 12.5px !important; }
.ed-form { display: grid; gap: 8px; padding: 12px; border-radius: var(--lx-r-case); background: var(--lx-tuile); border: 1px solid var(--lx-trait-doux); }
.ed-form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--mz-encre-douce); }
.ed-flash { animation: ed-flash 1.2s var(--lx-courbe); }
@keyframes ed-flash { from { background: var(--mz-vert-clair); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ed-flash { animation: none; } }

.ed-champ.ed-autre-forme { opacity: .62; }

/* la colonne « Champs » reste visible en défilant */
.modele-ouvert .modele-cote { align-self: stretch !important; height: auto !important; overflow: visible !important; }
.lx-cadre.ed-collante .ed-liste { max-height: calc(100vh - 430px); min-height: 160px; }
.modele-ouvert [hidden] { display: none !important; }
.modele-ouvert :focus-visible { outline: 2px solid var(--mz-vert); outline-offset: 2px; }

/* ce que le serveur dit de la version : ses changements, la différence de Lexia, ce qui ne s'applique plus */
.ed-liste-dite { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--mz-encre-douce); }
.ed-liste-dite del { color: var(--mz-encre-douce); }
.ed-liste-dite ins { text-decoration: none; color: var(--mz-encre); }
/* la carte de la version et la colonne « Champs » sont des cadres de la boîte ; l'étiquette de Lexia, en violet */
.lx-etat-ia { background: var(--rf-ia-clair); color: var(--rf-ia); }
.ed-de-la-version .lx-cadre-corps > p, .ed-collante .lx-cadre-corps > p { margin: 0; font-size: 13.5px; color: var(--mz-encre-douce); line-height: 1.45; }
.lx-cadre.ed-collante { position: sticky; top: 160px; z-index: 2; max-height: calc(100vh - 172px); overflow: auto; }
.lx-avis > .ed-liens, .lx-avis > .ed-liste-dite, .lx-avis > div { flex: 1 1 100%; }
.ed-form .ed-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.ed-form .ed-ligne label { flex: 1 1 140px; }

/* ===========================================================================
   Lot D1 · le nouveau design (maquette du 2026-10-25, `lots/maquettes/2026-10-25-nouveau-design/`) : les pièces
   qui manquaient à la boîte, et l'ossature. Une seule façon par geste.
   =========================================================================== */
.lx-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* « Voir plus » : ce qui se déplie (« Le détail », « Autres opérations », « Afficher ») ; le chevron tourne ouvert */
.lx-voir-plus, .lx-replie > summary.lx-lien, .lx-lien[data-lx-afficher] { display: inline-flex; align-items: center; gap: 4px; color: var(--mz-vert); font-size: 13px; font-weight: 500; cursor: pointer; }
.lx-voir-plus::before, .lx-replie > summary.lx-lien::before, .lx-lien[data-lx-afficher]::before { content: ""; width: 5px; height: 5px; margin: 0 3px 0 1px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.lx-replie[open] > summary.lx-lien::before, .lx-voir-plus[aria-expanded="true"]::before, .lx-lien[data-lx-afficher][aria-expanded="true"]::before { transform: rotate(45deg); }
.lx-voir-plus:hover, .lx-replie > summary.lx-lien:hover { text-decoration: none; color: var(--mz-vert-fonce); }

/* Le menu « … » : `details.menu-plus`, au dessin de la maquette (`refonte.css`, partie 7) */

/* La fenêtre et la recherche : posées au milieu, au-dessus d'un voile clair */
.lx-voile-fenetre { position: fixed; inset: 0; z-index: 94; background: var(--lx-voile); }
.lx-voile-fenetre[hidden], .lx-palette[hidden], .lx-fenetre[hidden] { display: none; }
.lx-palette, .lx-fenetre { position: fixed; z-index: 95; left: 50%; transform: translateX(-50%); max-width: 94vw; margin: 0; padding: 0; background: var(--mz-surface);
  border: 1px solid var(--mz-trait); border-radius: 12px; box-shadow: 0 24px 64px -16px rgba(27, 26, 23, .32); overflow: hidden; animation: lx-fenetre-entre var(--lx-entree) var(--lx-courbe); }
.lx-palette { top: 14vh; width: 600px; display: flex; flex-direction: column; align-items: stretch; gap: 0; }   /* un formulaire de l'application est une colonne serrée (`mizan.css`) */
.lx-palette-saisie { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--mz-trait); color: var(--mz-encre-tenue); }
.lx-palette-saisie input { flex: 1; min-width: 0; width: auto; height: 48px; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: none; font: inherit; font-size: 15px; color: var(--mz-encre); }
.lx-palette-saisie input::-webkit-search-cancel-button { display: none; }
.lx-palette kbd, .lx-menu-chercher kbd { font: 500 11px var(--sans); color: var(--mz-encre-tenue); border: 1px solid var(--mz-trait-fort); border-radius: 4px; padding: 0 5px; background: var(--mz-fond); }
.lx-palette-liste { max-height: min(60vh, 420px); overflow-y: auto; padding: 6px; }
.lx-palette-titre { padding: 8px 10px 4px; font-size: 12px; color: var(--mz-encre-tenue); }
.lx-palette-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--mz-encre); text-decoration: none; font-size: 14px; }
.lx-palette-ligne .lx-ic { color: var(--mz-encre-tenue); }
.lx-palette-ligne:hover, .lx-palette-ligne.lx-vise { background: var(--mz-survol); text-decoration: none; color: var(--mz-encre); }
.lx-palette-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-palette-precision { margin-left: auto; padding-left: 12px; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--mz-encre-tenue); }
.lx-palette-tous { color: var(--mz-vert); font-weight: 500; }
.lx-palette-rien { margin: 0; padding: 18px 10px; text-align: center; color: var(--mz-encre-tenue); font-size: 13.5px; }
.lx-fenetre { top: 9vh; width: 680px; max-height: 82vh; display: flex; flex-direction: column; }
.lx-fenetre > header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--mz-trait); }
.lx-fenetre > header h2 { margin: 0; flex: 1; font-size: 16px; font-weight: 600; }
.lx-fenetre-corps { flex: 1; overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.lx-fenetre-corps .lx-cadre { border: 0; box-shadow: none; }
/* un écran montré dans la fenêtre : la fenêtre porte déjà son titre et son chemin */
.lx-fenetre-corps .lx-tete .lx-ariane, .lx-fenetre-corps .lx-tete .lx-titre { display: none; }
.lx-fenetre-corps .lx-tete .lx-sous { margin: 0; }
.lx-fenetre-corps .lx-cadre-tete, .lx-fenetre-corps .lx-cadre-corps { padding-left: 0; padding-right: 0; }
.lx-fenetre-corps .lx-palette-liste { max-height: none; padding: 0; }
.lx-pas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--mz-encre-tenue); }
.lx-pas .lx-ic { width: 13px; height: 13px; }
.lx-pas [aria-current="step"] { color: var(--mz-encre); font-weight: 500; }
.lx-pas button { min-height: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; color: var(--mz-vert); cursor: pointer; }
.lx-pas button:disabled { color: var(--mz-encre-tenue); opacity: 1; cursor: default; }
.lx-pas [aria-current="step"], .lx-pas button[aria-current="step"]:disabled { color: var(--mz-encre); font-weight: 500; }

/* ---------------------------------------------------------------------------
   Lot D6 · le haut fixe d'une page (Othmane, 2026-10-27, sur les pages d'une société : « je scrolle tout et ça
   s'arrête à l'encart »). Le fil d'Ariane, le titre, le bandeau et les onglets restent en haut de l'écran, sur le
   fond de la page ; le reste défile dessous. Sa hauteur (`--lx-haut-fixe`, `composants.js`) fait passer dessous ce
   qui colle (le sommaire de la fiche) et ce qu'on vise par une ancre. Une fenêtre trop basse le laisse défiler.
   --------------------------------------------------------------------------- */
html { scroll-padding-top: var(--lx-haut-fixe, 0px); }
.lx-haut-fixe { position: sticky; top: 0; z-index: 30; margin-top: -16px; padding-top: 16px; background: var(--mz-fond); }
@media (max-height: 560px), print { .lx-haut-fixe { position: static; } }
/* ce qu'il y a à vérifier dans une section, au sommaire d'une page : un point ambre, dit au survol */
.lx-a-verifier { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mz-ambre); }

/* ---------------------------------------------------------------------------
   L'ossature : le menu de gauche (T-776, V2-68, lot D1). Des icônes seules dans une colonne de 64 px qui ne
   bouge jamais ; au passage de la souris, ou au clavier, il s'ouvre à 236 px par-dessus la page, ses noms
   paraissent, et il se referme dès qu'on sort, sans délai ni script. Chaque ligne a sa largeur ouverte et se
   coupe elle-même : l'icône ne bouge pas. Les notifications glissent depuis la droite (T-780).
   --------------------------------------------------------------------------- */
/* la page à droite du menu : `mizan.css`, T-776 (`body` en ligne) */
.barre { position: sticky; top: 0; align-self: flex-start; z-index: 80; width: 64px; flex: 0 0 64px; height: 100dvh; }
.barre .dedans { position: fixed; left: 0; top: 0; bottom: 0; width: 64px; padding: 12px 10px; display: flex; flex-direction: column; gap: 1px;
  background: #F2F2EF; border-right: 1px solid var(--mz-trait); overflow: hidden auto; overscroll-behavior: contain; transition: width .18s ease, box-shadow .18s ease; }   /* un menu plus haut que l'écran (les récents à 800 px) défile */
.barre:hover .dedans, .barre:has(:focus-visible) .dedans, .barre:has(details[open]) .dedans { width: 236px; box-shadow: 0 12px 32px rgba(27, 26, 23, .14), 0 0 0 1px var(--mz-trait); }
.barre .mot { opacity: 0; white-space: nowrap; transition: opacity .1s ease; }
.barre:hover .mot, .barre:has(:focus-visible) .mot, .barre:has(details[open]) .mot { opacity: 1; transition: opacity .14s ease .06s; }
.barre .lx-ic { width: 18px; height: 18px; }
/* la marque : le carré vert, Lexia et le cabinet */
.barre .tete-menu { display: block; flex: none; }
.barre .marque { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; text-decoration: none; color: var(--mz-encre); }
.barre .marque .lettre { flex: none; width: 26px; height: 26px; }
.barre .marque .mot { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.barre .marque .nom-marque { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.barre .marque .nom-marque .ia { color: inherit; }
.barre .marque .cabinet { font-size: 12px; color: var(--mz-encre-tenue); overflow: hidden; text-overflow: ellipsis; }
/* chaque ligne du menu : l'icône à sa place, le nom qui paraît */
.barre .lx-menu-chercher, .barre .nouvel-acte-menu, .barre .ecrans > a, .barre .menu-cloche > summary, .barre .recents-menu a {
  position: relative; display: flex; align-items: center; gap: 10px; flex: none; width: 100%; height: 36px; padding: 0 13px; overflow: hidden; white-space: nowrap;
  border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--mz-encre-douce); font-size: 14px; font-weight: 450; text-decoration: none; cursor: pointer; list-style: none; }
.barre .menu-cloche > summary::-webkit-details-marker { display: none; }
.barre .ecrans > a:hover, .barre .menu-cloche > summary:hover, .barre .menu-cloche[open] > summary, .barre .recents-menu a:hover,
.barre .lx-menu-chercher:hover { background: var(--mz-survol); color: var(--mz-encre); text-decoration: none; }
.barre .ecrans > a.ici, .barre .recents-menu a.ici { background: var(--mz-surface); color: var(--mz-encre); font-weight: 500;
  box-shadow: 0 1px 2px rgba(27, 26, 23, .08), 0 0 0 1px var(--mz-trait); }
/* « Chercher ⌘K » : une case au menu ouvert, une icône au menu replié */
.barre .lx-menu-chercher { margin: 0 0 2px; border: 1px solid transparent; color: var(--mz-encre-tenue); }
.barre:hover .lx-menu-chercher, .barre:has(:focus-visible) .lx-menu-chercher { background: var(--mz-surface); border-color: var(--mz-trait-fort); border-radius: 10px; }
.barre .lx-menu-chercher kbd { margin-left: auto; }
/* « Nouvelle opération » : un bouton blanc, le geste de tout le menu */
.barre .nouvel-acte-menu { margin: 6px 0 10px; border-radius: 10px; background: var(--mz-surface); color: var(--mz-encre); font-weight: 500;
  box-shadow: 0 0 0 1px var(--mz-trait-fort), var(--lx-ombre-bouton); }
.barre .nouvel-acte-menu:hover { background: var(--mz-survol-doux); color: var(--mz-encre); text-decoration: none; }
.barre .ecrans { display: flex; flex-direction: column; gap: 1px; }
.barre .assistant-rail .lx-ic { color: var(--mz-vert); }
.barre .assistant-rail[aria-expanded="true"] { background: var(--mz-surface); color: var(--mz-encre); box-shadow: 0 0 0 1px var(--mz-trait); }
.barre .lx-menu-titre { display: block; flex: none; padding: 14px 13px 4px; font-size: 12px; color: var(--mz-encre-tenue); overflow: hidden; }
/* la cloche et son nombre ; la fenêtre glisse depuis la droite, par-dessus la page (T-780) */
.barre .menu-cloche { position: static; }
.barre .cloche-compte { position: absolute; top: 5px; left: 24px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--mz-ambre); color: var(--mz-surface);
  font-size: 10.5px; font-weight: 600; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #F2F2EF; }
.barre .menu-cloche .fenetre { position: fixed; top: 12px; right: 12px; bottom: 12px; left: auto; z-index: 96; width: min(440px, calc(100vw - 100px)); overflow-y: auto;
  background: var(--mz-surface); border: 1px solid var(--mz-trait); border-radius: 14px; box-shadow: 0 24px 64px -16px rgba(27, 26, 23, .32); animation: lx-glisse .25s cubic-bezier(.2, .8, .2, 1) both; }
.barre .menu-cloche .fenetre .tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; padding: 16px 18px 10px; background: var(--mz-surface); }
.barre .menu-cloche .fenetre .tete h2 { margin: 0; font-size: 16px; font-weight: 600; }
.barre .menu-cloche .fenetre .combien { font-size: 12.5px; color: var(--mz-encre-tenue); }
.barre .menu-cloche .notif { display: grid; grid-template-columns: 10px 1fr; column-gap: 10px; padding: 10px 18px; color: var(--mz-encre); text-decoration: none; border-top: 1px solid var(--mz-trait); }
.barre .menu-cloche .notif:hover { background: var(--mz-survol-doux); }
.barre .menu-cloche .notif .pastille-nature { grid-row: 1 / 3; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--mz-eteint); }
.barre .menu-cloche .notif .fait { font-size: 13.5px; }
.barre .menu-cloche .notif .ou { grid-column: 2; font-size: 12.5px; color: var(--mz-encre-tenue); }
.barre .menu-cloche .notif.encore { display: block; font-size: 13px; color: var(--mz-encre-douce); }
.barre .menu-cloche .rien { margin: 0; padding: 18px; text-align: center; font-size: 13.5px; color: var(--mz-encre-tenue); }
.barre .menu-cloche .pied { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px 18px;
  background: var(--mz-surface); border-top: 1px solid var(--mz-trait); }
.barre .menu-cloche .pied a { color: var(--mz-vert); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.barre .menu-cloche .pied form { margin: 0; }
/* le cabinet suspendu et l'horloge réglée : un mot au menu ouvert, rien replié */
.barre .cabinet-suspendu, .barre .horloge-reglee { flex: none; max-height: 0; margin: 0 4px; padding: 0 10px; overflow: hidden; opacity: 0; border-radius: 8px; font-size: 12px; text-align: center;
  background: var(--mz-ambre-clair); color: var(--mz-ambre-fonce); text-decoration: none; transition: opacity .12s ease, max-height .2s ease, padding .2s ease, margin .2s ease; }
.barre:hover .cabinet-suspendu, .barre:hover .horloge-reglee, .barre:has(:focus-visible) .cabinet-suspendu, .barre:has(:focus-visible) .horloge-reglee { max-height: 80px; padding: 6px 10px; margin: 0 4px 8px; opacity: 1; }
.barre .cabinet-suspendu { position: relative; cursor: help; }
/* T-574 · le motif de la suspension, au survol, dans l'infobulle sombre */
.barre .cabinet-suspendu .bulle-suspension { display: none; position: fixed; left: 244px; top: 60px; z-index: 97; width: max-content; max-width: 280px; padding: 7px 10px; border-radius: 6px;
  background: var(--mz-encre); color: var(--mz-surface); font-size: 12.5px; line-height: 1.45; text-align: left; }
.barre .cabinet-suspendu:hover .bulle-suspension, .barre .cabinet-suspendu:focus-within .bulle-suspension { display: block; }
/* les récents : une initiale, le nom */
.barre .recents-menu { display: flex; flex-direction: column; gap: 1px; }
.barre .recents-menu a { height: 32px; font-size: 13px; padding-left: 11px; }
.barre .recents-menu .ini { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--mz-champ); color: var(--mz-encre-douce); font-size: 11px; font-weight: 600; }
.barre .recents-menu .mot { overflow: hidden; text-overflow: ellipsis; }
/* le compte, en bas : ses deux écrans, puis qui l'on est */
.barre .a-droite { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--mz-trait); display: flex; flex-direction: column; gap: 1px; }
/* Othmane, 01/11 · les absences et les journaux dans le menu du nom ; ce qui attend une validation, en orange, sur le nom
   et sur sa ligne */
.barre .menu-compte .a-trancher { margin-left: auto; padding: 0 7px; border-radius: 999px; background: var(--mz-ambre-clair); color: var(--mz-ambre-fonce); font-size: 11.5px; font-weight: 500; }
.barre .menu-compte { position: relative; }
.barre .menu-compte > summary { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; overflow: hidden; white-space: nowrap; border-radius: 8px; cursor: pointer; list-style: none; }
.barre .menu-compte > summary::-webkit-details-marker { display: none; }
.barre .menu-compte > summary:hover, .barre .menu-compte[open] > summary { background: var(--mz-survol); }
.barre .menu-compte .initiales { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mz-vert); color: var(--mz-surface); font-size: 11.5px; font-weight: 600; }
.barre .menu-compte .nom { display: flex; flex-direction: column; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--mz-encre); }
.barre .menu-compte .tiroir { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 2; padding: 6px; background: var(--mz-surface); border: 1px solid var(--mz-trait);
  border-radius: 10px; box-shadow: var(--lx-ombre-flottante); }
.barre .menu-compte .tiroir .qui { margin: 0; padding: 6px 8px 8px; display: flex; flex-direction: column; font-size: 13px; }
.barre .menu-compte .tiroir .qui b { font-weight: 600; }
.barre .menu-compte .tiroir .qui span { font-size: 12px; color: var(--mz-encre-tenue); white-space: normal; }
.barre .menu-compte .tiroir .sortir { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; box-shadow: none;
  color: var(--mz-rouge); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.barre .menu-compte .tiroir .sortir:hover { background: var(--mz-rouge-clair); }

/* ---------------------------------------------------------------------------
   Lot D3 · le mouvement, pour toute l'application (la maquette du 2026-10-25, « moderne » sans excès) : 150 à
   200 ms, rien qui clignote, rien qui fasse attendre ; tout se coupe sous `prefers-reduced-motion` (en tête de
   feuille). Puis la fenêtre et le panneau latéral communs, le message bref, la zone grisée, et les pièces que les
   écrans du lot prennent à la maquette. */

/* Un bouton se soulève à peine au survol et s'enfonce à la pression */
.btn { transition: background .15s, box-shadow .15s, color .15s, transform .12s var(--lx-courbe); }
.btn:not(:disabled):active { transform: scale(.97); }
.btn.btn-plein:not(:disabled):hover { transform: translateY(-1px); }
.btn .lx-ic { width: 15px; height: 15px; margin-right: 6px; flex: none; }
.btn.btn-icone .lx-ic { margin: 0; }

/* La fenêtre (⌘K, « Nouvelle opération ») entre en glissé et en fondu courts, et sort de même (`.lx-sort`, `ossature.js`) */
@keyframes lx-fenetre-entre { from { opacity: 0; transform: translate(-50%, 10px) scale(.985); } }
@keyframes lx-fenetre-sort { to { opacity: 0; transform: translate(-50%, 6px) scale(.985); } }
@keyframes lx-fondu { from { opacity: 0; } }
@keyframes lx-fondu-sort { to { opacity: 0; } }
.lx-voile-fenetre { animation: lx-fondu var(--lx-entree) ease; }
.lx-voile-fenetre.lx-sort { animation: lx-fondu-sort 150ms ease forwards; }
.lx-fenetre.lx-sort, .lx-palette.lx-sort { animation: lx-fenetre-sort 150ms ease forwards; }
.lx-voile { animation: lx-fondu var(--lx-entree) ease; }

/* Le tiroir de l'application (`data-tiroir`, `mizan/refonte.js`) : à droite, il glisse en 180 ms ; avec `data-fenetre`,
   c'est une fenêtre au milieu, qui monte en fondu (1c : les formulaires courts). Un seul mécanisme, deux places. */
.tiroir-refonte { width: min(480px, 100vw); transition: transform var(--lx-entree) var(--lx-courbe), opacity 150ms ease; }
.tiroir-refonte.tiroir-fenetre { top: 9vh; bottom: auto; left: 50%; right: auto; width: min(600px, 94vw); max-height: 82vh; border: 1px solid var(--mz-trait);
  border-radius: var(--lx-r-fenetre); overflow: hidden; box-shadow: 0 24px 64px -16px rgba(27, 26, 23, .32); transform: translate(-50%, 10px) scale(.985); }
.tiroir-refonte.tiroir-fenetre.visible { transform: translate(-50%, 0); }
.tiroir-refonte > header h2 { font-size: 16px; }
.tiroir-refonte .corps { background: var(--mz-surface); }
.tiroir-refonte .corps .lx-cadre { border: 0; box-shadow: none; background: none; }
.tiroir-refonte .corps .lx-cadre-corps { padding-left: 0; padding-right: 0; }
.tiroir-refonte .corps .lx-page-etroite { max-width: none; }
.tiroir-refonte .corps .lx-boutons-pied { justify-content: flex-end; }
.tiroir-voile { background: var(--lx-voile); animation: lx-fondu var(--lx-entree) ease; }

/* La zone grisée pendant un chargement : la page ou la fenêtre attend sa réponse, sans se figer à l'œil */
main.page[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .15s ease .08s; }
main.page { transition: opacity .15s ease; }

main.page.lx-sur-place .lx-tiroir, main.page.lx-sur-place .lx-voile { animation: none; }

/* Lot V-ÉCRANS · une zone que l'écran remplace sur place (`mizan/panneau.js`) : sans boîte à elle, la mise en page de
   ce qu'elle porte ne change pas ; grisée pendant qu'elle attend sa réponse, comme la page */
.lx-zone { display: contents; }
[data-zone][aria-busy="true"]:not(.lx-zone), .lx-zone[aria-busy="true"] > * { opacity: .55; pointer-events: none; transition: opacity .15s ease .08s; }

/* Une ligne, une information, une personne qui vient d'arriver (l'adresse la vise) s'allume puis s'éteint */
@keyframes lx-arrive { from { background-color: var(--mz-vert-clair); } to { background-color: transparent; } }
.lx-info:target, .lx-ligne:target, .lx-personne:target, .fs-role:target, tr:target, .lx-vient { animation: lx-arrive 1.4s ease-out; }

/* Le message bref après un geste : il monte en bas de l'écran, reste un instant, et s'efface seul */
.lx-brefs { position: fixed; left: 50%; bottom: 24px; z-index: 99; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.lx-bref { margin: 0; padding: 8px 14px; border-radius: 8px; background: var(--mz-encre); color: var(--mz-surface); font-size: 13px; box-shadow: var(--lx-ombre-flottante);
  animation: lx-bref 3.2s var(--lx-courbe) forwards; }
@keyframes lx-bref { 0% { opacity: 0; transform: translateY(12px); } 6%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); visibility: hidden; } }
/* sous « mouvement réduit », la règle générale couperait l'animation à sa fin, message caché : il reste, sans bouger */
@media (prefers-reduced-motion: reduce) { .lx-bref { animation: lx-bref-calme 3.2s forwards !important; } }
@keyframes lx-bref-calme { 0%, 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* Une information de la fiche : un clic sur sa valeur l'ouvre (5a) */
a.lx-info-ouvre { color: inherit; text-decoration: none; border-radius: 4px; cursor: text; transition: background .12s; }
a.lx-info-ouvre:hover { background: var(--mz-survol-doux); box-shadow: 0 0 0 3px var(--mz-survol-doux); }
.lx-info-edition { animation: lx-entre var(--lx-entree) var(--lx-courbe); }

/* La tête d'une page : une ligne en petit au-dessus du titre (la date du jour) ; les gestes du jour dessous */
.lx-surtitre { margin: 0 0 4px; font-size: 13px; color: var(--mz-encre-tenue); }
.lx-gestes-du-jour { margin-top: -6px; }
.lx-a-droite { margin-left: auto; }

/* Les chiffres, comme la maquette : l'icône dans son carré et le libellé, le grand nombre, ce qu'il compte ; la
   couleur va à l'icône et au nombre, jamais au fond */
.lx-chiffre { padding: 14px 16px; gap: 8px; }
.lx-chiffre:not(.lx-chiffres-petits .lx-chiffre) .lx-chiffre-v { flex-direction: column; align-items: flex-start; gap: 2px; }
.lx-chiffre-lib { display: flex; align-items: center; gap: 8px; }
.lx-chiffre-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--mz-champ); color: var(--mz-encre-douce); }
.lx-chiffre-ic .lx-ic { width: 15px; height: 15px; }
.lx-chiffre-ambre, .lx-chiffre-rouge { background: var(--mz-surface); box-shadow: var(--lx-ombre); }
.lx-chiffre-ambre .lx-chiffre-lib, .lx-chiffre-rouge .lx-chiffre-lib { color: var(--mz-encre-douce); }
.lx-chiffre-ambre .lx-chiffre-v b { color: var(--mz-encre); }
.lx-chiffre-ambre .lx-chiffre-ic { background: var(--lx-ambre-fond); color: var(--mz-ambre); }
.lx-chiffre-rouge .lx-chiffre-ic { background: var(--mz-rouge-clair); color: var(--mz-rouge); }
.lx-chiffre-rouge .lx-chiffre-v b { color: var(--lx-rouge-etat); }
.lx-chiffre-vert .lx-chiffre-ic { background: var(--mz-vert-clair); color: var(--mz-vert); }
.lx-chiffre-vert .lx-chiffre-v b { color: var(--mz-encre); }

/* L'encart : un cadre en deux volets, ses chiffres et son geste à gauche, ses lignes à droite sur fond gris */
.lx-encart { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.lx-encart-gauche { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.lx-encart-titre { margin: 0; font-size: var(--lx-t-cadre); font-weight: 600; }
.lx-encart-lignes { min-width: 0; padding: 6px; background: var(--lx-tuile); border-left: 1px solid var(--lx-trait); }
.lx-encart-lignes .lx-tableau, .lx-encart-lignes .lx-tableau-defile { background: none; border: 0; box-shadow: none; }
.lx-encart-lignes thead { display: none; }
@media (max-width: 1100px) { .lx-encart { grid-template-columns: 1fr; } .lx-encart-lignes { border-left: 0; border-top: 1px solid var(--lx-trait); } }

/* Les filtres en segments, comme la maquette : un rail gris, le filtre choisi en blanc ; le nombre dans la pastille */
.lx-filtres { align-items: center; }
.lx-segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--lx-r-case); background: var(--lx-selection); }
.lx-segment .lx-filtre { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--mz-encre-douce); font-size: 13px; transition: background .15s, color .15s, box-shadow .15s; }
.lx-segment .lx-filtre:hover { background: color-mix(in srgb, var(--mz-surface) 55%, transparent); color: var(--mz-encre); }
.lx-segment .lx-filtre[aria-pressed="true"], .lx-segment .lx-filtre[aria-current="page"] { background: var(--mz-surface); color: var(--mz-encre); border: 0; box-shadow: var(--lx-ombre-pastille); }
.lx-segment .lx-compte { margin-left: 2px; }
.lx-barre-filtres { align-items: center; }
.lx-filtre-deroulant { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-width: 240px; }
.lx-filtre-deroulant .lx-choix { min-width: 240px; }

/* La barre des lignes cochées : elle paraît, en bas de l'écran, dès qu'une case est cochée, et dit combien */
form:has(.lx-barre-cochees) { counter-reset: lx-cochees; }
form:has(.lx-barre-cochees) tbody input[data-lx-coche]:checked { counter-increment: lx-cochees; }
.lx-barre-cochees { display: none; position: sticky; bottom: 16px; z-index: 20; align-items: center; gap: 10px 14px; flex-wrap: wrap; width: max-content; max-width: 100%;
  margin: 0 auto; padding: 8px 10px 8px 16px; border-radius: 14px; background: var(--mz-surface); box-shadow: var(--lx-ombre-flottante); }
form:has(tbody input[data-lx-coche]:checked) .lx-barre-cochees { display: flex; animation: lx-entre var(--lx-entree) var(--lx-courbe); }
.lx-cochees::before { content: counter(lx-cochees); display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px;
  background: var(--mz-encre); color: var(--mz-surface); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Une personne nommée dans une case sans précision (la juriste d'une société) : son monogramme, petit, sur la même
   ligne que son nom, comme la maquette */
.lx-cellule:has(> .lx-avatar):not(:has(.lx-sous)) { flex-wrap: nowrap; align-items: center; }
.lx-avatar.lx-avatar-petit, .lx-cellule:not(:has(.lx-sous)) > .lx-avatar { width: 24px; height: 24px; font-size: 10.5px; background: var(--mz-champ); color: var(--mz-encre-douce); }
/* ===========================================================================
   Lot D4 · les modèles, l'administration et le compte (maquette du 2026-10-25) : les pièces qui manquaient.
   =========================================================================== */
/* Le sous-menu : les onglets en colonne, à gauche de la page (`onglets.html`, `vertical`) ; la page à droite */
.lx-onglets.lx-sous-menu { position: sticky; top: 20px; flex-direction: column; flex-wrap: nowrap; gap: 1px; border-bottom: 0; }
.lx-onglets.lx-sous-menu > a { display: flex; gap: 8px; margin: 0; padding: 6px 8px; border: 0; border-radius: 8px; color: var(--mz-encre-douce); font-size: 13.5px; line-height: 1.35;
  text-decoration: none; transition: background-color .12s ease, color .12s ease; }
.lx-onglets.lx-sous-menu > a:hover { background: var(--mz-survol); color: var(--mz-encre); }
.lx-onglets.lx-sous-menu > [aria-current] { background: var(--mz-surface); color: var(--mz-encre); font-weight: 500; box-shadow: 0 1px 2px rgba(27, 26, 23, .08), 0 0 0 1px var(--mz-trait); }
.lx-onglets.lx-sous-menu .lx-compte { margin-left: auto; flex: none; }
.lx-avec-sous-menu { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.lx-avec-sous-menu > :not(.lx-sous-menu) { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
/* l'administration : ses pages sont celles de l'ancienne application, non réécrites ; sa tête commune
   (`_tete_administration.html`) porte le titre et le sous-menu, et la page entière se range comme `lx-avec-sous-menu` */
main.page:has(> .admin-tete) { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; row-gap: 18px; align-content: start; align-items: start; }
main.page:has(> .admin-tete) > * { grid-column: 2; min-width: 0; }
main.page > .admin-tete, main.page > .admin-tete .admin-tete-dedans { display: contents; }
main.page > .admin-tete .lx-tete { grid-column: 1 / -1; padding-top: 24px; }
main.page > .admin-tete .lx-sous-menu { grid-column: 1; grid-row: 2 / span 40; align-self: start; }
@media (max-width: 1100px) { .lx-avec-sous-menu, main.page:has(> .admin-tete) { grid-template-columns: 180px minmax(0, 1fr); column-gap: 24px; } }

/* Un formulaire court (inviter, déclarer une absence, déposer le Word du cabinet), en page ou dans la fenêtre du tiroir
   (`data-tiroir data-fenetre`, lot D3) : le libellé au-dessus de sa case, la case sur toute la largeur, le pied à droite */
.lx-formulaire-court { display: flex; flex-direction: column; gap: 14px; }
main.page > .lx-formulaire-court { max-width: 620px; padding-top: 24px; }
.lx-formulaire-court form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; }
.lx-formulaire-court form > p { margin: 0; }
.lx-formulaire-court label { display: block; font-size: 13.5px; font-weight: 500; color: var(--mz-encre); }
/* lot DL · une case à cocher garde sa ligne, la case puis son libellé, dans une fenêtre comme ailleurs */
.lx-formulaire-court .lx-coches label { display: flex; }
.lx-formulaire-court :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 0; }
.lx-formulaire-court small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mz-encre-tenue); }
.lx-formulaire-court form p.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lx-formulaire-court .lx-boutons-pied { justify-content: flex-end; }
/* le dépôt d'un fichier en zone : un cadre pointillé, l'icône, le geste (la maquette, « Choisir le Word ») */
.lx-formulaire-court .lx-gestes { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.lx-formulaire-court .lx-gestes > form { align-items: stretch; width: 100%; }
.lx-formulaire-court .lx-depot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; padding: 26px 16px;
  border: 1px dashed var(--mz-trait-fort); border-radius: var(--lx-r-case); background: var(--lx-survol); color: var(--mz-encre); font-weight: 500; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease; }
.lx-formulaire-court .lx-depot:hover, .lx-formulaire-court .lx-depot:focus-within { border-color: var(--mz-vert); background: var(--mz-surface); }
.lx-formulaire-court .lx-depot .lx-ic { color: var(--mz-encre-tenue); }

/* Une personne dans une ligne : ses initiales (`initiales`), en petite pastille grise, puis son nom */
.lx-qui { display: inline-flex; align-items: center; gap: 8px; }
.lx-avatar.lx-avatar-petit { width: 22px; height: 22px; font-size: 10.5px; font-weight: 600; background: var(--mz-champ); color: var(--mz-encre-douce); }

/* La page d'une erreur (introuvable, un refus) hors d'une page tenue : l'air du haut de page */
main.page:not(.tenue) > .lx-page-etroite { padding-top: 24px; }
/* la tête commune posée seule en haut d'une page de l'ancienne application (les absences) : le même air */
main.page:not(.tenue) > .lx-tete:first-child { padding-top: 24px; }

/* Les écrans de l'ancienne application, au dessin de la maquette sans les réécrire (leur mise en page seulement) :
   la porte de la connexion, les droits des collaborateurs, « À désigner », les lignes des notifications */
main.page.etroite:has(.porte-marque)::before { display: none; }
main.page.etroite .porte:has(.porte-marque) { width: min(380px, 94vw); box-sizing: border-box; margin: 0 auto; padding: 28px 28px 24px; gap: 16px; border-radius: var(--lx-r-fenetre);
  box-shadow: var(--lx-ombre); animation: lx-entre var(--lx-entree) var(--lx-courbe); }
.porte .porte-marque { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--mz-encre); }
.porte:has(.porte-marque) form { gap: 14px; }
.porte:has(.porte-marque) label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; }
.porte:has(.porte-marque) button[type="submit"] { border-radius: var(--lx-r-rond); }
.porte .porte-lien { margin: 0; text-align: center; font-size: 14px; }
.porte .porte-lien a { color: var(--mz-vert); font-weight: 500; text-decoration: none; }
.porte .porte-note { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--mz-encre-tenue); }
main.page.admin-v2 .table-admin td.droits { display: table-cell; }
main.page.admin-v2 .table-admin .droit { display: block; padding: 0; border-radius: 0; background: none; text-align: left; color: var(--mz-encre-douce); font-size: 13px !important; line-height: 1.45; }
main.page.admin-v2 .ligne-admin { grid-template-columns: minmax(160px, 1fr) minmax(200px, 1.4fr) auto; }
main.page .cadre-notifs .notif .dit { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; max-width: none; }
main.page .cadre-notifs .notif .dit .fait { font-size: 14px; color: var(--mz-encre); }
main.page .cadre-notifs .notif .dit .ou { font-size: 12.5px; color: var(--mz-encre-tenue); }
main.page .cadre-notifs .notif .mene { color: var(--mz-vert); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }

/* ===========================================================================
   Lot D5 · ce qui dépasse et chevauche (relevé par Othmane le 2026-10-26). La garde des écrans
   (`socle/tests/test_garde_des_ecrans.py`) ouvre chaque écran à 1440, 1280 et 800 et refuse ce qui sort de son cadre,
   en chevauche un autre ou se coupe.
   =========================================================================== */
/* Le tableau ne défile jamais de côté (règle 7 des écrans) : ses cases passent à la ligne (les règles du tableau, plus
   haut, ne les retiennent plus) ; trop étroit pour ses colonnes, chaque ligne se replie, ses cases l'une sous l'autre,
   chacune précédée du nom de sa colonne. */
.lx-tableau { container: lx-tableau / inline-size; }
.lx-tableau .lx-details > summary { white-space: nowrap; }
@container lx-tableau (max-width: 700px) {
  .lx-tableau table, .lx-tableau tbody, .lx-tableau tfoot { display: block; }
  .lx-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lx-tableau tr { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--lx-trait-doux); }
  .lx-tableau tbody tr:last-child { border-bottom: 0; }
  .lx-tableau tbody tr:hover { background: var(--mz-survol-doux); }
  .lx-tableau td, .lx-tableau[data-lx-compact] td { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); align-items: center; gap: 2px 12px;
    height: auto; padding: 0; border: 0; background: none; }
  .lx-tableau td::before { content: attr(data-libelle); font-size: 12.5px; font-weight: 400; color: var(--mz-encre-tenue); }
  .lx-tableau td:is(.lx-titre-ligne, [data-libelle=""], .lx-col-geste), .lx-tableau[data-lx-compact] tr.lx-groupe > td { display: block; }
  .lx-tableau td:is(.lx-titre-ligne, [data-libelle=""], .lx-col-geste)::before, .lx-groupe td::before { content: none; }
  .lx-tableau tr:not(.lx-groupe) > td:not(:has(.lx-cellule > *)) { display: none; }
  .lx-tableau tr[data-lx-ligne][hidden], .lx-tableau tr:is([data-lx-filtre-cache], [data-lx-recherche-cache]) { display: none; }
  .lx-tableau tfoot tr { background: var(--mz-tete); }
  .lx-groupe { padding: 10px 14px 6px; }
  .lx-groupe td { height: auto; padding: 0; border: 0; }
}

/* Le sous-menu : un nom long passe à la ligne, son nombre reste à droite, en haut */
.lx-onglets.lx-sous-menu > a { align-items: flex-start; white-space: normal; text-wrap: pretty; }
.lx-onglets.lx-sous-menu > a .lx-compte { margin-top: 1px; }

/* Le titre d'un groupe de lignes en pastille (« Échus », « Dans l'année ») */
.lx-groupe .lx-etat { vertical-align: 1px; }
/* Une phrase à droite des filtres (« Ce qui manque se complète dans la ligne… ») */
.lx-filtres:has(.lx-filtres-note) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lx-filtres-note { margin: 0 0 0 auto; font-size: 12.5px; color: var(--mz-encre-tenue); }
/* Les gestes repliés d'une ligne : un bouton, ses choix dessous à l'ouverture */
.lx-gestes-replies > summary.btn { list-style: none; }
.lx-gestes-replies > summary.btn::-webkit-details-marker { display: none; }
.lx-gestes-replies > summary.btn::after { content: ""; width: 5px; height: 5px; margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.lx-gestes-replies[open] > summary.btn::after { margin-top: 2px; transform: rotate(-135deg); }
.lx-gestes-replies[open] > .lx-gestes { display: flex; flex-wrap: wrap; gap: 6px; }
/* La recherche d'un tableau : un cadre dont aucune ligne ne correspond se cache ; dessous, ce qui correspond ailleurs
   (la page des modèles : les autres formes), dans les lignes de la recherche ⌘K */
.lx-cadre[data-lx-recherche-cache], [data-lx-section][data-lx-recherche-cache] { display: none; }
.lx-recherche-ailleurs { max-height: none; padding: 0; }
.lx-recherche-ailleurs:empty { display: none; }
.lx-recherche-ailleurs .lx-palette-titre { padding-left: 0; }
/* Les informations en deux colonnes, une seule quand la place manque : une valeur ne se coupe jamais lettre à lettre */
.lx-infos:not(.lx-infos-une) { grid-template-columns: repeat(auto-fit, minmax(max(300px, calc((100% - 28px) / 2)), 1fr)); }
/* Le dépôt du Word du cabinet en page entière : les formes à cocher, puis la zone du Word, l'une sous l'autre */
.lx-formulaire-court .lx-gestes > form { flex-wrap: nowrap; }
.lx-formulaire-court .lx-gestes .lx-coches { flex-basis: auto; }
/* L'administration à 800 de large (ses pages restent celles de l'ancienne application) : le courriel d'un collaborateur
   passe à la ligne, le geste d'une ligne « À désigner » passe sous elle */
main.page.admin-v2 .table-admin td.chiffre { overflow-wrap: anywhere; }
@media (max-width: 1000px) { main.page.admin-v2 .table-admin td:first-child { white-space: normal; } }
@media (max-width: 1000px) {
  main.page.admin-v2 .ligne-admin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); row-gap: 8px; }
  main.page.admin-v2 .ligne-admin > .btn { grid-column: 1 / -1; justify-self: start; }
  main.page.admin-v2 .ligne-admin.entete > .droite { display: none; }
}

/* ══ Lot IA3 · la réponse de Lexia, une forme et un dessin, dans le fil et dans l'assistant ═══════════════════
   (maquette de l'assistant, `lots/maquettes/assistant/assistant.css`, les pièces `ia-*` reprises telles quelles) */
.ia-reponse { display: flex; flex-direction: column; gap: 9px; min-width: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ia-reponse p { margin: 0; }
.ia-reponse ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.ia-texte { display: flex; flex-direction: column; gap: 7px; }
.ia-intertitre { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--mz-encre-tenue); letter-spacing: .01em; }
.ia-intertitre.ia-analyse { color: var(--mz-vert-fonce); }
.ia-faits small { display: block; font-size: 12px; color: var(--mz-encre-tenue); }
.ia-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--mz-vert); animation: ia-clignote 1s steps(2, start) infinite; }
@keyframes ia-clignote { to { visibility: hidden; } }
.ia-ecrit-cache { display: none !important; }
.ia-lien { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--mz-vert); cursor: pointer; align-self: flex-start; }
.ia-lien:hover { text-decoration: underline; text-underline-offset: 2px; }
.ia-note-historique, .ia-aide { margin: 0; font-size: 12.5px; color: var(--mz-encre-tenue); }
/* les lectures faites : « Lexia lit la fiche de… », une ligne chacune, grisées une fois finies */
/* Lot IA4 · le repli des lectures et les numéros des sources : l'assistant les montre (`assistant.css`), pas encore le fil */
.ia-lu, .ia-num, .ia-num-src { display: none; }
.ia-etapes { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ia-etape { display: flex; align-items: center; gap: 8px; animation: lx-entre var(--lx-entree) var(--lx-courbe) both; }
.ia-etape .ia-rond { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--lx-gris-clair); border-top-color: var(--mz-vert); animation: ia-tourne .7s linear infinite; flex: none; box-sizing: border-box; }
.ia-etape.ia-fait { color: var(--mz-encre-tenue); }
.ia-etape.ia-fait .ia-rond { border: 0; animation: none; background: var(--mz-vert); position: relative; }
.ia-etape.ia-fait .ia-rond::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
@keyframes ia-tourne { to { transform: rotate(360deg); } }
/* l'attente : trois points ; passé une demi-seconde, des lignes grises qui brillent pour une liste ; passé 8 s, l'avis */
.ia-ecrit { display: inline-flex; align-items: center; gap: 8px; color: var(--mz-encre-tenue); font-size: 13px; }
.ia-ecrit i { width: 5px; height: 5px; border-radius: 50%; background: var(--mz-eteint); animation: ia-point 1s infinite ease-in-out; }
.ia-ecrit i:nth-child(2) { animation-delay: .15s; } .ia-ecrit i:nth-child(3) { animation-delay: .3s; }
@keyframes ia-point { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.ia-gris { display: flex; flex-direction: column; gap: 8px; min-width: min(420px, 100%); }
.ia-gris i { display: block; height: 40px; border-radius: 10px; background: linear-gradient(90deg, var(--lx-gris-lueur) 25%, var(--lx-gris-clair) 50%, var(--lx-gris-lueur) 75%); background-size: 200% 100%; animation: ia-brille 1.3s linear infinite; }
.ia-gris i:nth-child(2) { width: 88%; } .ia-gris i:nth-child(3) { width: 72%; }
@keyframes ia-brille { to { background-position: -200% 0; } }
/* une question de clarification : des boutons dans le message */
.ia-question { display: flex; flex-direction: column; gap: 8px; }
.ia-choix { display: grid; gap: 6px; width: 100%; max-width: 560px; }
.ia-option { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 9px 14px; border: 1px solid var(--lx-bord-case); border-radius: var(--lx-r-case); background: var(--mz-surface); font: inherit; color: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.ia-option:hover { background: var(--lx-survol); border-color: var(--mz-trait-fort); }
.ia-option:focus-visible { outline: 0; box-shadow: var(--lx-anneau); border-color: var(--mz-vert); }
.ia-option b { font-weight: 500; }
.ia-option.ia-nu { border-style: dashed; background: none; padding: 7px 14px; color: var(--mz-encre-douce); }
.ia-option.ia-choisi { border-color: var(--mz-vert); box-shadow: 0 0 0 3px var(--mz-vert-clair); }
.ia-choix.ia-tranche .ia-option:not(.ia-choisi) { opacity: .45; pointer-events: none; }
.ia-init { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 11px; font-weight: 600; background: linear-gradient(180deg, var(--lx-marque-haut), var(--lx-marque-bas)); color: var(--mz-encre-douce); }
/* des sociétés, des documents : une ligne chacun */
.ia-socs { display: grid; gap: 6px; width: 100%; }
.ia-soc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 9px 12px; border-radius: var(--lx-r-case); background: var(--mz-surface); border: 1px solid var(--lx-trait-tableau); animation: lx-entre var(--lx-entree) var(--lx-courbe) both; animation-delay: calc(var(--i, 0) * 70ms); }
.ia-soc .ia-qui2 { flex: 1 1 0; min-width: 150px; font-size: 13.5px; }
.ia-soc .ia-qui2 b { font-weight: 600; }
.ia-soc .ia-qui2 small { color: var(--mz-encre-tenue); }
.ia-soc .ia-qui2 > span { display: block; color: var(--mz-encre-douce); font-size: 12.5px; }
.ia-soc .ia-etat-col { display: flex; align-items: center; gap: 4px; flex: none; }
.ia-soc .btn { margin-left: auto; }
.ia-format { font: 600 10px "Geist Mono", monospace; }
.ia-preuve-calc { margin: 0; font-size: 12px; color: var(--mz-encre-tenue); display: flex; gap: 6px; align-items: center; }
.ia-preuve-calc::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mz-vert); flex: none; }
/* le texte rédigé, ses sources, ses suites */
.ia-redige { white-space: pre-wrap; padding: 10px 12px; border-radius: 10px; background: var(--mz-surface); border: 1px solid var(--mz-trait); font-size: 13.5px; }
.ia-avis-boutons { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ia-sources { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--lx-trait); padding-top: 8px; }
.ia-source { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 9px; border-radius: 8px; background: var(--lx-tuile); box-shadow: inset 0 0 0 1px var(--lx-trait-doux); color: inherit; text-decoration: none; }
a.ia-source:hover { box-shadow: inset 0 0 0 1px var(--mz-vert); }
.ia-k { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 6px; flex: none; }
.ia-k-loi { background: #EAF0F8; color: #1F3F6B; } .ia-k-cab { background: var(--lx-gris-clair); color: var(--mz-encre-douce); } .ia-k-dos { background: var(--mz-vert-clair); color: var(--mz-vert-fonce); }
.ia-suites { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-suite { border: 1px solid var(--lx-bord-case); background: var(--mz-surface); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; color: var(--mz-encre-douce); cursor: pointer; transition: border-color .12s, color .12s; }
.ia-suite:hover { border-color: var(--mz-vert); color: var(--mz-vert-fonce); }
.ia-suite:disabled { opacity: .5; cursor: default; }
/* « Voir plus » d'un avis : la cause entière, repliée (règle 8 des écrans) */
.ia-voir-plus > summary { list-style: none; display: inline; }
.ia-voir-plus > summary::-webkit-details-marker { display: none; }
.ia-voir-plus[open] > summary { font-size: 0; } .ia-voir-plus[open] > summary::after { content: "Voir moins"; font-size: 12.5px; }
.ia-plus { margin: 4px 0 0; font-size: 12.5px; }
.lx-avis .ia-avis-boutons { margin-top: 6px; }
/* la preuve sous une valeur proposée : la phrase du message, ou la page du document, qui s'ouvre d'un clic */
.ia-preuve { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--mz-encre-tenue); margin-top: 2px; }
.ia-preuve q { quotes: "« " " »"; color: var(--mz-encre-douce); font-style: normal; }
.ia-page { border: 0; font: 500 11px "Geist Mono", monospace; padding: 1px 7px; border-radius: 5px; background: var(--lx-tuile); box-shadow: inset 0 0 0 1px var(--lx-bord-case); color: var(--mz-encre-douce); cursor: pointer; text-decoration: none; transition: background .12s; }
.ia-page:hover { background: var(--mz-vert-clair); color: var(--mz-vert-fonce); }
/* une proposition qui n'est pas une valeur : lancer une opération, envoyer des relances */
.ia-proposition .ia-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ia-proposition .ia-ligne { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; background: var(--lx-tuile); font-size: 13px; }
.ia-proposition .ia-ligne .ia-qui2 span { display: block; color: var(--mz-encre-douce); font-size: 12.5px; }
.ia-ecartee { margin: 0; font-size: 13px; color: var(--mz-encre-tenue); }
@media (prefers-reduced-motion: reduce) { .ia-etape .ia-rond, .ia-caret, .ia-ecrit i, .ia-gris i, .ia-soc { animation: none !important; } }
/* la page d'une preuve, ouverte à droite (point 14) */
.ia-apercu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(46vw, 620px); display: flex; flex-direction: column; background: var(--mz-surface); box-shadow: -14px 0 30px -18px rgba(28, 26, 22, .35); animation: lx-glisse .22s var(--lx-courbe) both; }
.ia-apercu header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--lx-trait); font-size: 13px; }
.ia-apercu header b { flex: 1; font-weight: 500; }
.ia-apercu iframe { flex: 1; border: 0; width: 100%; background: var(--lx-tuile); }
.ia-deja-produit { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
/* une lecture longue : la barre, qui avance sans compter quand les pages partent ensemble */
.ia-prog { height: 6px; border-radius: 99px; background: var(--lx-gris-clair); overflow: hidden; margin: 6px 0; }
.ia-prog i { display: block; height: 100%; width: 35%; border-radius: 99px; background: var(--mz-vert); }
.ia-prog.ia-indefini i { animation: ia-va 1.2s ease-in-out infinite alternate; }
@keyframes ia-va { from { margin-left: 0; } to { margin-left: 65%; } }
@media (prefers-reduced-motion: reduce) { .ia-prog.ia-indefini i { animation: none; } }

/* ---------------------------------------------------------------------------
   Lot T2 · le tableau de bord en indicateurs (la maquette validée par Othmane, `lots/maquettes/tableau-indicateurs/`) :
   des cartes qui montent une à une ; dans chacune, des chiffres qui mènent à la liste qu'ils comptent. Un anneau (les
   terminées sur les lancées, le retard en rouge), des colonnes par étape, une barre en parts, de petites cases, des
   lignes chiffrées. L'anneau se dessine, les colonnes et la barre grandissent, en 800 ms, en ralentissant à la fin ;
   rien ne bouge pour qui demande un mouvement réduit (la règle générale, plus haut).
   --------------------------------------------------------------------------- */
:root { --lx-part-ambre: #E0A15E; --lx-point-gris: #C9C7BF; --lx-fond-doux: #F4F4F0; --lx-ralenti: cubic-bezier(.33, 1, .68, 1); }
/* une page large (la maquette : 40 px de marge, 1 260 px de contenu au plus) ; elle défile en elle-même, comme les
   autres pages (`atelier.css`), et son haut fixe colle en haut d'elle */
main.page.lx-large:not(.nue):not(.tenue):not(.etroite) { padding: 26px 40px 28px; gap: 18px; }
main.page.lx-large > .lx-page { width: 100%; max-width: 1260px; margin: 0 auto; }
.lx-indicateurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .lx-indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .lx-indicateurs { grid-template-columns: minmax(0, 1fr); } .lx-indicateur-large { grid-column: auto; } }
@keyframes lx-monte { from { opacity: 0; transform: translateY(8px); } }
.lx-indicateur { isolation: isolate; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 22px; border-radius: 16px; background: var(--mz-surface);
  box-shadow: 0 0 0 1px rgba(28, 26, 22, .07), 0 1px 2px rgba(28, 26, 22, .04); transition: box-shadow .18s ease;
  animation: lx-monte .24s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(30ms + var(--lx-rang, 0) * 40ms); }
.lx-indicateur:hover { box-shadow: 0 0 0 1px rgba(28, 26, 22, .12), 0 12px 28px -16px rgba(28, 26, 22, .30); }
.lx-indicateur-large { grid-column: span 2; }
.lx-indicateur-titre { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--mz-encre-douce); }
.lx-indicateur-ic { display: inline-flex; }
.lx-indicateur-nom { flex: 1; min-width: 0; }
.lx-encre-ambre { color: var(--mz-ambre); }
.lx-encre-rouge { color: var(--mz-rouge); }
/* « Voir », la liste entière ; un lien en mot, vert */
.lx-voir { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 500; color: var(--mz-vert); text-decoration: none; cursor: pointer; }
.lx-voir:hover { color: var(--mz-vert-fonce); text-decoration: underline; }
.lx-voir .lx-ic { width: 14px; height: 14px; }
.lx-voir-petit { align-self: flex-start; padding-top: 4px; font-size: 12.5px; }
.lx-indicateur a:focus-visible { outline: 2px solid var(--mz-vert); outline-offset: 2px; }
/* le grand chiffre, et ce qu'il compte */
.lx-grand-chiffre { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13.5px; color: var(--mz-encre-douce); }
.lx-grand-chiffre > b { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--mz-encre); font-variant-numeric: tabular-nums; }
.lx-grand-chiffre > .lx-ligne-chiffre { padding: 2px 8px; font-weight: 500; font-size: 13.5px; }
.lx-grand-chiffre > .lx-ligne-chiffre::before { inset: 0; }
/* une ligne chiffrée : un point, un nom, le nombre ; toute la ligne mène à sa liste ; son fond de survol déborde de
   10 px de chaque côté, sans pousser la ligne hors de son cadre */
.lx-legende { display: flex; flex-direction: column; min-width: 0; }
.lx-anneau-et-legende > .lx-legende { flex: 1; }
.lx-ligne-chiffre { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--mz-encre); text-decoration: none; }
.lx-ligne-chiffre::before { content: ""; position: absolute; inset: 0 -10px; z-index: -1; border-radius: 10px; transition: background .15s ease; }
.lx-ligne-chiffre:hover { color: var(--mz-encre); text-decoration: none; }
.lx-ligne-chiffre:hover::before { background: var(--lx-fond-doux); }
.lx-ligne-chiffre.lx-encre-rouge, .lx-ligne-chiffre.lx-encre-rouge:hover { color: var(--mz-rouge); }
.lx-ligne-chiffre-serree { padding-top: 5px; padding-bottom: 5px; font-size: 13.5px; }
.lx-ligne-chiffre-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-ligne-chiffre > b, .lx-colonne > b, .lx-mini-case > b, .lx-roles b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lx-ligne-chiffre-serree > b { width: 22px; text-align: right; }
.lx-legende-pied { margin: 0; padding-top: 2px; }
.lx-legende-pied .lx-voir { font-size: 12.5px; }
.lx-pt { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--lx-point-gris); }
.lx-pt-vert { background: var(--mz-vert); } .lx-pt-rouge { background: var(--mz-rouge); } .lx-pt-ambre { background: var(--lx-part-ambre); }
/* un état en mot court, dans une ligne chiffrée : « 2 en retard », « Échus » */
.lx-etat-court { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.lx-ligne-chiffre:not(.lx-ligne-chiffre-serree) .lx-etat-court { padding: 2px 9px; font-size: 12px; }
.lx-etat-court-rouge { background: var(--mz-rouge-clair); color: var(--mz-rouge); }
.lx-etat-court-ambre { background: var(--mz-ambre-clair); color: var(--mz-ambre-fonce); }
.lx-etat-court-gris { background: var(--lx-trait-doux); color: var(--mz-encre-douce); }
/* l'anneau : les terminées en vert, le retard en rouge au bout ; il se dessine */
@keyframes lx-trace { from { stroke-dasharray: 0 100; } }
.lx-anneau-et-legende { display: flex; align-items: center; gap: 20px; }
.lx-anneau { flex: none; width: 112px; height: 112px; }
.lx-anneau circle { fill: none; stroke-width: 13; transform: rotate(-90deg); transform-origin: 60px 60px; }
.lx-anneau-fond { stroke: var(--lx-trait-tableau); }
.lx-anneau-vert { stroke: var(--mz-vert); }
.lx-anneau-rouge { stroke: var(--mz-rouge); }
.lx-anneau-vert, .lx-anneau-rouge { animation: lx-trace .8s var(--lx-ralenti) both; }
.lx-anneau-nombre { font-size: 23px; font-weight: 600; fill: var(--mz-encre); font-variant-numeric: tabular-nums; }
.lx-anneau-mot { font-size: 11px; fill: var(--mz-encre-tenue); }
/* des colonnes par étape ; elles grandissent */
@keyframes lx-pousse { from { height: 0; } }
.lx-colonnes-bloc { display: flex; flex-direction: column; gap: 6px; }
.lx-colonnes-bloc > .lx-note { margin: 0; }
.lx-colonnes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lx-colonne { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 10px; color: var(--mz-encre); text-decoration: none; }
.lx-colonne:hover { background: var(--lx-fond-doux); color: var(--mz-encre); text-decoration: none; }
.lx-colonne > b { font-size: 13px; }
.lx-colonne-fut { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 38px; }
.lx-colonne-fut > span { display: block; width: 22px; border-radius: 5px 5px 2px 2px; background: var(--mz-vert); animation: lx-pousse .8s var(--lx-ralenti) both; }
.lx-colonne-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--mz-encre-douce); }
/* une barre en parts : en retard, chez le client, dans les temps ; elle s'étend */
@keyframes lx-etend { from { width: 0; } }
.lx-parts { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: 999px; background: var(--lx-trait-doux); }
.lx-parts > span { animation: lx-etend .8s var(--lx-ralenti) both; }
.lx-part-rouge { background: var(--mz-rouge); } .lx-part-ambre { background: var(--lx-part-ambre); } .lx-part-vert { background: var(--mz-vert); }
/* de petites cases chiffrées, chacune mène à sa liste */
.lx-mini-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lx-mini-case { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--lx-survol); font-size: 12px; color: var(--mz-encre-douce); text-decoration: none; }
.lx-mini-case:hover { background: var(--lx-trait-doux); color: var(--mz-encre-douce); text-decoration: none; }
.lx-mini-case > b { font-size: 16px; color: var(--mz-encre); }
.lx-mini-case > b.lx-encre-rouge { color: var(--mz-rouge); }
.lx-mini-case > span { display: flex; align-items: baseline; gap: 5px; }
.lx-mini-case .lx-pt { transform: translateY(-1px); }
/* les rôles, en pastilles */
.lx-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lx-roles > span { padding: 3px 10px; border-radius: 999px; background: var(--lx-fond-doux); font-size: 12.5px; color: var(--mz-encre-douce); }
.lx-roles b { color: var(--mz-encre); }
/* les points d'attention, sur deux colonnes : une icône dans son carré, le titre, ce qu'il compte, le nombre */
.lx-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
@media (max-width: 680px) { .lx-points { grid-template-columns: minmax(0, 1fr); } }
.lx-points .lx-ligne-chiffre { padding: 12px; }
.lx-points .lx-ligne-chiffre::before { inset: 0; }
.lx-points .lx-ligne-chiffre-nom { white-space: normal; }
.lx-points .lx-ligne-chiffre-nom > span { display: block; font-weight: 500; }
.lx-points .lx-ligne-chiffre-nom > small { display: block; font-size: 12.5px; color: var(--mz-encre-tenue); }
.lx-points .lx-ligne-chiffre > .lx-ic { width: 15px; height: 15px; color: var(--mz-encre-tenue); }
.lx-pastille-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; }
.lx-pastille-ic-ambre { background: var(--mz-ambre-clair); color: var(--mz-ambre-fonce); }
.lx-pastille-ic-rouge { background: var(--mz-rouge-clair); color: var(--mz-rouge); }
.lx-pastille-ic-gris { background: var(--lx-trait-doux); color: var(--mz-encre-douce); }

/* Lot T2 · l'onglet Opérations : ses filtres en rangs de pastilles, sous la tête, dans le haut fixe */
.lx-haut-filtres { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; box-shadow: 0 1px 0 rgba(28, 26, 22, .06); }
.lx-filtres-rangs { display: flex; flex-direction: column; gap: 8px; }
.lx-filtres-rang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lx-filtres-nom { width: 44px; font-size: 12.5px; color: var(--mz-encre-tenue); }
.lx-separateur { width: 1px; height: 20px; margin: 0 4px; background: var(--mz-trait-fort); }
/* le haut fixe d'une page large couvre aussi sa marge du haut */
main.page.lx-large .lx-haut-fixe { top: -26px; margin-top: -26px; padding-top: 26px; }
.lx-filtre .lx-compte { background: none; padding: 0; min-width: 0; color: var(--mz-encre-tenue); font-weight: 500; font-size: 12.5px; }