/* La Configuration de la solution : la COLLABORATION (CDC_APPSTUDIO_MODIF I14, 2026-11-05). Une feuille à part : 48-cms.css
   tient sous 650 lignes (son cliquet ne remonte jamais). L'auteur de chaque version ; les commentaires d'une vue et d'un bloc ;
   les personnes présentes dans l'Interface ; la demande d'approbation avant publication. Jetons de l'atelier seulement, aucune
   couleur en dur (N20) : la couleur d'une personne est une des huit teintes d'app (--app-*), choisie par le serveur (data-teinte). */
@layer modules{
  .cms-version-auteur{ color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14em; }
  .cms-version-auteur[data-genre="agent"]{ font-style:italic; }
  .cms-version-auteur[data-genre=""]{ color:var(--mut2); }
  .cms-version-actuelle{ margin:0 0 var(--sp-8); background:var(--bg); }

  /* La teinte d'une personne (pastille, contour du bloc qu'elle a choisi). */
  [data-teinte="0"],[data-cms-presence="0"]{ --qui:var(--app-interface); } [data-teinte="1"],[data-cms-presence="1"]{ --qui:var(--app-audio); }
  [data-teinte="2"],[data-cms-presence="2"]{ --qui:var(--app-video); } [data-teinte="3"],[data-cms-presence="3"]{ --qui:var(--app-tableau); }
  [data-teinte="4"],[data-cms-presence="4"]{ --qui:var(--app-document); } [data-teinte="5"],[data-cms-presence="5"]{ --qui:var(--app-design); }
  [data-teinte="6"],[data-cms-presence="6"]{ --qui:var(--app-plan); } [data-teinte="7"],[data-cms-presence="7"]{ --qui:var(--app-calendrier); }

  /* COL4 : les pastilles des présents, dans le bandeau ; le bloc qu'une autre personne a choisi, entouré de sa teinte. */
  .cms-presence{ display:flex; align-items:center; margin-inline-end:var(--sp-8); }
  .cms-presence[hidden]{ display:none; }
  .cms-presence-qui{ display:inline-grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; background:var(--qui,var(--accent)); color:var(--card);
    font-size:10px; font-weight:var(--fw-strong); line-height:1; letter-spacing:.02em; border:2px solid var(--card); }
  .cms-presence .cms-presence-qui + .cms-presence-qui{ margin-inline-start:calc(-1 * var(--sp-6)); }
  .cms-presence-qui[data-vous]{ opacity:.7; }
  /* Un contour seulement : le dessin reproduit la page (une position, un pseudo-élément ajoutés y changeraient la mise en page). */
  #cms-ap-composee [data-cms-presence]{ outline:2px solid var(--qui); outline-offset:2px; }

  /* COL3 : un bloc commenté se cerne en pointillé dans le dessin ; l'arbre des vues et les Calques comptent les fils ouverts. */
  #cms-ap-composee [data-cms-comm-n]:not([data-cms-presence]){ outline:1px dashed var(--accent); outline-offset:3px; }
  #cms-gauche .cms-vue[data-cms-comm-n]::after, #cms-blocs .cms-bloc-ligne[data-cms-comm-n] .cms-bloc-nom::after{ content:attr(data-cms-comm-n); display:inline-grid; place-items:center; min-width:16px; height:16px;
    margin-inline-start:var(--sp-6); padding:0 var(--sp-4); border-radius:8px 8px 8px 2px; background:var(--accent); color:var(--card); font:var(--fw-strong) 10px/16px var(--font-sans); vertical-align:middle; }
  #cms-gauche .cms-vue[data-cms-comm-n]::after{ margin-inline-start:auto; }
  .cms-comm-compte{ display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 var(--sp-4); border-radius:8px; background:var(--accent); color:var(--card); font-size:10px; }
  .cms-comm-fils{ display:flex; flex-direction:column; gap:var(--sp-8); margin-block-end:var(--sp-8); }
  .cms-comm-fil{ padding:var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); }
  .cms-comm-fil.resolu{ opacity:.65; }
  .cms-comm-tete{ display:flex; align-items:center; gap:var(--sp-6); min-width:0; }
  .cms-comm-tete .cms-presence-qui{ width:20px; height:20px; border-width:0; font-size:9px; }
  .cms-comm-nom{ font-weight:var(--fw-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cms-comm-quand{ margin-inline-start:auto; color:var(--mut2); font-size:var(--fs-xs); white-space:nowrap; }
  .cms-comm-texte{ margin:var(--sp-4) 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
  .cms-comm-reponse{ margin-block-start:var(--sp-8); padding-inline-start:var(--sp-8); border-inline-start:2px solid var(--line); }
  .cms-comm-repondre{ display:flex; gap:var(--sp-4); align-items:flex-start; margin-block-start:var(--sp-8); }
  .cms-comm-saisie{ flex:1; width:100%; min-width:0; resize:vertical; font:inherit; padding:var(--sp-4) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:inherit; }
  .cms-comm-actes{ display:flex; gap:var(--sp-8); margin-block-start:var(--sp-4); }
  .cms-comm-lien{ padding:0; border:0; background:none; color:var(--mut); font:inherit; font-size:var(--fs-xs); cursor:pointer; }
  .cms-comm-lien:hover{ color:var(--fg); text-decoration:underline; }
  .cms-comm-tete .cms-comm-lien{ margin-inline-start:var(--sp-4); }
  .cms-comm-resolu{ margin:var(--sp-4) 0 0; }

  /* COL6 : l'approbation, dans la fenêtre Publier ; le compte des demandes sur le Publier du bandeau. */
  .cms-approb{ display:flex; flex-direction:column; gap:var(--sp-8); margin-block:var(--sp-12); padding:var(--sp-12); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); }
  .cms-approb-etat{ display:flex; align-items:center; gap:var(--sp-6); margin:0; }
  .cms-approb-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-8); }
  .cms-approb-demande{ padding:var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); }
  .cms-approb-demande p{ margin:0; }
  .cms-approb-decider{ display:flex; gap:var(--sp-4); align-items:center; margin-block-start:var(--sp-8); }
  .cms-approb-note{ flex:1; min-width:0; }
  .cms-tete-publier[data-cms-demandes]{ position:relative; }
  .cms-tete-publier[data-cms-demandes]::after{ content:attr(data-cms-demandes); position:absolute; inset-block-start:2px; inset-inline-end:2px; min-width:14px; height:14px; padding:0 3px;
    border-radius:7px; background:var(--danger); color:var(--card); font:var(--fw-strong) 9px/14px var(--font-sans); }
}