@layer modules{
/* 22b-bandeau.css · Le bandeau à menus des applications du Studio (CDC_STUDIO_BANDEAU D1, 2026-10-17). Le proprio : « un
   header style DA partagé : quand je modifie le style, par exemple d'un bouton, tous les headers des apps se synchronisent ».
   Une seule feuille, des noms neutres (bandeau-*), dessinés par le composant 23-bandeau.js ; les règles viennent du bandeau
   du Tableur (21-edition.css, 2026-10-16), à l'identique. Ce qui est propre à une application (Partager du Tableur, la
   pastille « à revoir » de l'Interface) reste dans sa feuille. */
/* ── Témoin et croix ─────────────────────────────────────────────────────
   L'en-tête du Tableur (marque, fil d'Ariane) est retiré le 2026-10-16 (proprio) ; ses deux contrôles vivent au bout de
   la rangée des menus, avec le dessin des boutons de l'en-tête de l'app (--chrome-bg, --radius-sm). */
/* La croix du Tableur : le carré de la croix des modules (.dhapp-x), au bout de la rangée des menus depuis le
   retrait de l'en-tête (2026-10-16) ; à 28 px comme le reste de la rangée. */
.bandeau-rond{ display:grid; place-items:center; flex:none; width:var(--hh-ctl); height:var(--hh-ctl); padding:0; border:0; border-radius:var(--radius-sm); background:var(--chrome-bg); color:var(--chrome-ink); cursor:pointer; }
.bandeau-rond:hover{ color:var(--chrome-ink); background:color-mix(in srgb,var(--chrome-ink) 12%,var(--chrome-bg)); }
.bandeau-rond svg.ic{ width:16px; height:16px; }
/* La croix du bandeau est celle des modals (VAGUE_UI_MODIF2 F1, D3, 2026-11-04) : ni fond ni filet au repos, le fond léger
   --line2 au survol ; les autres boutons ronds de la rangée gardent leur fond. 23-bandeau.js et 39b posent data-bandeau-fermer ;
   la croix du Tableur (#esh-btn-fermer, 53-edition-sheet.js) recevra la classe bandeau-fermer à la fusion de sa branche. */
.bandeau-rond:is(.bandeau-fermer,[data-bandeau-fermer],#esh-btn-fermer){ background:transparent; }
.bandeau-rond:is(.bandeau-fermer,[data-bandeau-fermer],#esh-btn-fermer):hover{ background:var(--line2); }
/* L'historique des versions et le témoin « Enregistré » : UN seul contrôle (proprio, 2026-10-16 : « unifie le design »),
   le carré de l'en-tête étiré en pilule : même hauteur --hh-ctl, même fond --chrome-bg, même rayon --radius-sm, même encre.
   L'horloge à gauche, un filet, l'état à droite ; un clic ouvre l'historique. */
.bandeau-temoin{ display:inline-flex; align-items:center; gap:var(--sp-8); height:var(--hh-ctl); box-sizing:border-box; padding:0 var(--sp-12) 0 var(--sp-10); border:0; border-radius:var(--radius-sm); background:var(--chrome-bg); color:var(--chrome-ink); font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-medium); white-space:nowrap; cursor:pointer; }
.bandeau-temoin:hover{ background:color-mix(in srgb,var(--chrome-ink) 12%,var(--chrome-bg)); }
.bandeau-temoin > svg.ic{ width:16px; height:16px; }
.bandeau-temoin-sep{ width:1px; height:16px; background:color-mix(in srgb,var(--chrome-ink) 25%,transparent); }
.bandeau-temoin-pastille{ display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--ok); color:var(--on-solid); }
.bandeau-temoin-pastille svg.ic{ width:10px; height:10px; }
.bandeau-temoin[data-etat="encours"] .bandeau-temoin-pastille{ background:var(--mut2); }
.bandeau-temoin[data-etat="erreur"] .bandeau-temoin-pastille{ background:var(--err); }

/* ── Le témoin d'enregistrement commun (CDC_LOT2_DIVERS D5, 2026-11-04 ; 23c-enregistreur.js) ─────────────────────────────
   Synchronisé : une icône seule (l'infobulle dit depuis quand) ; en cours : l'icône qui tourne et « Synchronisation en
   cours » en gris ; hors ligne, échec, conflit : leur icône et leur phrase. Un clic ouvre l'historique des versions. Même
   hauteur que les contrôles de la rangée, sans fond au repos. */
.dh-temoin{ display:inline-flex; align-items:center; gap:var(--sp-6); height:var(--outils-h, 28px); box-sizing:border-box; padding:0 var(--sp-8); border:0; border-radius:var(--radius-sm);
  background:transparent; color:var(--mut); font:inherit; font-size:var(--fs-sm); white-space:nowrap; cursor:pointer; }
.dh-temoin:hover{ background:var(--line2); color:var(--txt); }
.dh-temoin .dh-temoin-ic{ display:inline-grid; place-items:center; }
/* Le texte (« Synchronisation en cours »…) se pose à gauche de l'icône, hors du flux : le témoin garde la largeur de son icône et
   rien ne glisse dans le bandeau quand il paraît ou part (layout-shift relevé au banc squelettes_ui, 2026-11-04). */
.dh-temoin{ position:relative; }
.dh-temoin .dh-temoin-txt{ position:absolute; inset-inline-end:100%; top:50%; transform:translateY(-50%); padding-inline-end:var(--sp-4); pointer-events:none; }
.dh-temoin .dh-temoin-ic svg.ic, #dhapp .dh-temoin .dh-temoin-ic svg{ width:16px; height:16px; }   /* l'icône d'une rangée (S2 de la DA commune) */
.dh-temoin[data-etat="synchro"]{ color:var(--ok); }
.dh-temoin[data-etat="echec"], .dh-temoin[data-etat="conflit"]{ color:var(--warn); }
@media (prefers-reduced-motion:no-preference){ .dh-temoin[data-etat="encours"] .dh-temoin-ic svg{ animation:dh-temoin-tourne 1s linear infinite; } }
@keyframes dh-temoin-tourne{ to{ transform:rotate(360deg); } }
/* L'historique des versions commun (dhVersionsPanneau) : la liste par jour à gauche, l'aperçu à droite. */
.dh-versions{ display:flex; flex-direction:column; gap:var(--sp-12); min-width:min(720px, 86vw); }
.dh-ver-tete{ display:flex; justify-content:flex-end; }
.dh-ver-corps{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-16); min-height:280px; }
.dh-ver-liste{ max-height:60vh; overflow:auto; }
.dh-ver-jour + .dh-ver-jour{ margin-top:var(--sp-12); }
.dh-ver-j{ font-size:var(--fs-sm); font-weight:var(--fw-strong); color:var(--txt); margin-bottom:var(--sp-4); text-transform:none; }
.dh-ver-l{ display:flex; align-items:center; gap:var(--sp-6); padding:var(--sp-2) 0; }
.dh-ver-l.on .dh-ver-voir{ color:var(--accent-texte); font-weight:var(--fw-medium); }
.dh-ver-voir{ flex:none; min-width:52px; border:0; background:transparent; color:var(--txt); font:inherit; cursor:pointer; text-align:start; }
.dh-ver-voir:hover{ text-decoration:underline; text-underline-offset:3px; }
.dh-ver-nom{ flex:1; min-width:0; height:var(--hh-ctl); }
.dh-ver-apercu{ border:1px solid var(--line2); border-radius:var(--radius-sm); padding:var(--sp-8); overflow:auto; max-height:60vh; }
.dh-ver-pre{ margin:0; font-family:var(--font-mono); font-size:var(--fs-xs); white-space:pre-wrap; color:var(--mut); }
@media (max-width:640px){ .dh-ver-corps{ grid-template-columns:1fr; } }

/* ── Barre des menus ───────────────────────────────────────────────────────
   Compacte (proprio, 2026-10-16 : « plus esthétique, compact ») : des libellés nus au corps de console, sans chevrons
   ni cadres, 28 px de haut ; le menu ouvert prend l'encre et le fond du chrome (--chrome-*, comme les boutons de
   l'en-tête) ; à droite, des boutons fantômes au même gabarit et Partager à la même hauteur. Mêmes 18 px de côté
   que l'en-tête, pour que les deux barres s'alignent. L'horloge de cette barre est partie : l'historique des versions
   vit dans l'en-tête, avec le témoin « Enregistré ». */
.bandeau{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-4) var(--sp-18); border-bottom:1px solid var(--line2); background:var(--card); flex:none; overflow-x:auto; scrollbar-width:none; }
.bandeau::-webkit-scrollbar{ display:none; }
.bandeau-menu{ display:inline-flex; align-items:center; height:28px; padding:0 var(--sp-10); border:0; border-radius:var(--radius-sm); background:none; font:inherit; font-size:var(--fs-md); font-weight:var(--fw-regular); color:var(--txt); cursor:pointer; white-space:nowrap; flex:none; }
.bandeau-menu:hover{ background:var(--card2); }
.bandeau-menu[aria-expanded="true"]{ background:var(--chrome-bg); color:var(--chrome-ink); }
.bandeau-droite{ display:flex; align-items:center; gap:var(--sp-4); margin-left:auto; flex:none; }
.bandeau-ic{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-6); height:28px; min-width:28px; padding:0 var(--sp-6); border:0; border-radius:var(--radius-sm); background:none; color:var(--mut); font:inherit; font-size:var(--fs-md); cursor:pointer; white-space:nowrap; }
.bandeau-ic:hover{ background:var(--card2); color:var(--txt); }
.bandeau-ic svg.ic{ width:16px; height:16px; }
.bandeau-texte{ padding:0 var(--sp-10) 0 var(--sp-8); }
.bandeau .bandeau-rond{ width:28px; height:28px; }
.bandeau .bandeau-temoin{ height:28px; margin-left:var(--sp-4); }
.bandeau-sep{ width:1px; height:16px; background:var(--line); margin:0 var(--sp-6); }
/* Le corps de la fenêtre n'a qu'une ligne : quand une application y pose le bandeau en premier, le reste garde toute la hauteur. */
.dhapp-body:has(> .bandeau){ grid-template-rows:auto minmax(0,1fr); }
/* Une fenêtre au corps marqué (pad : Entreprise) : le bandeau reprend toute la largeur, collé au haut, comme ailleurs. */
.dhapp-body.pad > .bandeau{ margin:calc(var(--sp-16) * -1) calc(var(--sp-20) * -1) var(--sp-16); }
/* 2026-10-17 (le proprio : « les boutons du header : transition-duration 0s, pour que l'effet hover soit réactif ») : aucun
   bouton du bandeau ne s'anime, les siens comme ceux qu'une application y pose (Partager, la pastille des anomalies…). */
.bandeau :is(button, a, [role="button"]){ transition-duration:0s; }
/* Discussions, une pilule (le fond de l'en-tête, l'accent au survol) à la hauteur des autres boutons du bandeau. Au milieu
   depuis le 2026-10-18, à DROITE depuis le 2026-10-19 (proprio, dans le Tableur : « met-le à droite, pas au centre ») :
   juste avant la droite du bandeau (margin-left:auto) ; la feuille est partagée, les dix apps du Studio le suivent.
   Sous 900 px, l'icône seule. */
.bandeau-discussions{ flex:none; margin-left:auto; margin-right:var(--sp-8); display:inline-flex; align-items:center; gap:var(--sp-6); height:var(--outils-h, 28px); padding:0 var(--sp-10) 0 var(--sp-8); border:0; border-radius:var(--radius-sm); background:var(--chrome-bg); color:var(--txt); font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-regular); white-space:nowrap; cursor:pointer; transition-duration:0s; }
.bandeau-discussions + .bandeau-droite{ margin-left:0; }
.bandeau-discussions:hover{ background:color-mix(in srgb, var(--accent) 18%, var(--card)); }
/* CDC_DA_COMMUNE § 6, S8 (2026-10-24) : dans le bandeau des apps, l'accent reste rare. Ses pastilles (témoin, croix,
   Discussions, menu ouvert) prennent le fond neutre des champs de la DA commune au lieu du fond teinté de l'en-tête de
   l'atelier (--chrome-bg) qu'elles reprenaient (CDC_STUDIO_BANDEAU). Révocable : retirer ces deux règles. */
.bandeau{ --chrome-bg:var(--outils-champ); --chrome-ink:var(--txt); }
.bandeau .bandeau-discussions{ background:var(--outils-champ); }
.bandeau .bandeau-discussions:hover{ background:var(--outils-survol); }
.bandeau .bandeau-discussions svg{ color:var(--txt); }
.bandeau-discussions:focus-visible{ outline:2px solid var(--focus-anneau); outline-offset:1px; }
/* CDC_DA_COMMUNE § 6 (2026-10-24) : un bouton du bandeau comme les autres (28 px, rayon de 22c, icône de 16 px) ; une
   pilule de 30 px à 999 px de rayon avant. Révocable ici. */
.bandeau-discussions svg{ width:16px; height:16px; flex:none; color:var(--accent); }
@media (max-width:900px){ .bandeau-discussions{ padding:0 var(--sp-6); } .bandeau-discussions > span{ display:none; } }
}

/* L'identité de l'application, en tête du bandeau (2026-10-25) : le logo et le nom de l'app (« Hdplio › » devant jusqu'au
   2026-11-04, CDC_LOT2_DIVERS P2), au bord gauche du contenu de l'app
   (le padding du bandeau, 18 px, celui de la barre de la fenêtre), puis un filet avant les menus. */
.bandeau-id{ display:inline-flex; align-items:center; gap:var(--sp-6); flex:none; height:20px; margin-right:var(--sp-8); padding-right:var(--sp-12);
  border-right:.5px solid var(--line); font-size:var(--fs-md); white-space:nowrap; }
.bandeau-app-ic{ display:inline-grid; place-items:center; color:var(--accent); }
.bandeau-app-ic svg{ width:16px; height:16px; }
.bandeau-app-ic svg.dh-logo{ width:20px; height:20px; margin:-2px; }   /* le logo de l'app (2026-11-02) : son relief demande 20 px, emprise de 16 */
.bandeau-app-n{ font-weight:var(--fw-medium); color:var(--txt); }
.bandeau-id + .bandeau-menu{ margin-left:calc(var(--sp-10) * -1 + var(--sp-4)); }
/* Sans Discussions (2026-10-25), le filet qui le séparait de la croix reste seul quand rien d'autre n'est à droite : il part. */
.bandeau-droite > .bandeau-sep:first-child{ display:none; }