/* =====================================================================
   modules/document.css — Documents, côté front
   ---------------------------------------------------------------------
   Deux usages : le partiel front/document/liste.html.twig (documents
   rattachés à une page ou une actualité), et l'espace « Documents » des
   salariés (fin de feuille). L'administration de la bibliothèque a sa
   propre feuille (admin/css/documents.css).
   ===================================================================== */

.doc-liste { margin-block: 1.5rem; }

.doc-liste__titre {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--irp-heading);
  margin: 0 0 .75rem;
}

.doc-liste__titre .bi { color: var(--irp-cyan-600); font-size: .95rem; }
[data-bs-theme='dark'] .doc-liste__titre .bi { color: var(--irp-cyan-300); }

.doc-liste__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  /* Des colonnes d'environ 18 rem, jamais une pièce étirée sur toute la
     largeur : un nom de fichier à gauche et son bouton à 800 px à droite ne
     se lisaient plus comme une seule chose. auto-fill garde les colonnes
     vides, si bien qu'un document seul garde sa largeur ; plusieurs se
     rangent côte à côte, et tout s'empile sur un écran étroit. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* --- Une pièce jointe -------------------------------------------------- */
.doc-item { break-inside: avoid; }

/* Une pièce qui porte son résumé (sujets d'un procès-verbal…) prend toute
   la ligne : le texte s'y lit sur la largeur de la carte, au lieu d'être
   coincé sous le document dans une colonne de 18 rem. Le lien, lui, garde
   la largeur d'une colonne, pour rester une seule chose avec son bouton. */
.doc-item:has(.doc-item__description) { grid-column: 1 / -1; }
.doc-item:has(.doc-item__description) .doc-item__lien { max-width: 24rem; }

.doc-item__lien {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem .85rem;
  background: var(--irp-surface);
  border: 1px solid var(--irp-border-soft);
  border-radius: var(--irp-radius);
  color: var(--irp-text);
  text-decoration: none;
  transition: border-color var(--irp-transition), box-shadow var(--irp-transition),
              transform var(--irp-transition);
}

.doc-item__lien:hover,
.doc-item__lien:focus-visible {
  border-color: var(--irp-cyan-200);
  box-shadow: var(--irp-shadow-sm);
  color: var(--irp-text);
  transform: translateY(-1px);
}

[data-bs-theme='dark'] .doc-item__lien:hover,
[data-bs-theme='dark'] .doc-item__lien:focus-visible {
  border-color: rgba(27, 157, 217, .35);
}

/* --- Icône, colorée selon la famille de fichier ------------------------ */
.doc-item__icone {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: var(--irp-radius-sm);
  font-size: 1.15rem;
  background: var(--irp-surface-3);
  color: var(--irp-text-muted);
}

/* Le code couleur aide à repérer un type de fichier d'un coup d'œil ;
   l'extension reste écrite en toutes lettres sous le libellé, pour ceux
   qui ne distinguent pas ces teintes. */
.doc-item__icone--pdf         { background: var(--irp-rejete-bg);  color: var(--irp-rejete-text); }
.doc-item__icone--image       { background: var(--irp-cyan-50);    color: var(--irp-cyan-700); }
.doc-item__icone--bureautique { background: var(--irp-valide-bg);  color: var(--irp-valide-text); }
.doc-item__icone--texte       { background: var(--irp-attente-bg); color: var(--irp-attente-text); }

[data-bs-theme='dark'] .doc-item__icone--image {
  background: rgba(27, 157, 217, .16);
  color: var(--irp-cyan-200);
}

/* --- Libellé et métadonnées -------------------------------------------- */
.doc-item__corps { min-width: 0; flex: 1 1 auto; }

.doc-item__nom {
  display: block;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--irp-heading);
  overflow-wrap: anywhere;
}

.doc-item__meta {
  display: block;
  font-size: .76rem;
  color: var(--irp-text-muted);
  margin-top: .1rem;
}

.doc-item__action {
  flex-shrink: 0;
  color: var(--irp-text-muted);
  font-size: 1rem;
  transition: color var(--irp-transition);
}

.doc-item__lien:hover .doc-item__action { color: var(--irp-cyan-600); }
[data-bs-theme='dark'] .doc-item__lien:hover .doc-item__action { color: var(--irp-cyan-300); }

/* --- Variante compacte -------------------------------------------------- */
/* Pour une colonne latérale ou un encart : pas de titre, moins de hauteur. */
.doc-liste--compact { margin-block: 1rem; }
.doc-liste--compact .doc-liste__items { gap: .35rem; }

.doc-liste--compact .doc-item__lien {
  padding: .5rem .6rem;
  gap: .6rem;
}

.doc-liste--compact .doc-item__icone {
  width: 1.9rem;
  height: 1.9rem;
  font-size: .95rem;
}

.doc-liste--compact .doc-item__nom { font-size: .85rem; }

/* =====================================================================
   Espace « Documents » des salariés (front/document/espace.html.twig)
   ---------------------------------------------------------------------
   Rubriques (catégories rendues visibles) et sous-dossiers, tous repliés à
   l'arrivée, en <details> : ils s'ouvrent au clavier et sans script. La
   recherche est dans modules/document.js.
   ===================================================================== */

.docs-intro { margin-bottom: 1rem; }

.docs-filtres { margin-bottom: 1rem; }
.docs-filtres__recherche { max-width: 28rem; }

.docs-compte {
  margin: 0 0 .75rem;
  font-size: .85rem;
  color: var(--irp-text-muted);
}

.docs-espace__documents { margin-bottom: .5rem; }

/* LARGEUR DE LECTURE. Un dossier, c est un nom a gauche et un compteur a
   droite : etale sur 1 280 px, l oeil fait tout le trajet pour rien, et la
   page ressemble a un tableau vide. Le texte des pages redigees, lui, reste
   en pleine largeur (page.css) — ce n est pas le meme objet. */
.docs-rubriques {
  max-width: 54rem;
}

/* Nom du dossier parent au-dessus de ses rubriques : le CSE et le CHSCT ont
   chacun leurs « Proces-verbaux ». Un intertitre, pas un dossier de plus a
   ouvrir. */
.docs-groupe__titre {
  margin: 1.25rem 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--irp-text-muted);
}

.docs-groupe__titre:first-child {
  margin-top: 0;
}

/* --- Dossier repliable ----------------------------------------------------- */
.docs-dossier {
  margin-bottom: .5rem;
  border: 1px solid var(--irp-border-soft);
  border-radius: var(--irp-radius);
  background: var(--irp-surface-2);
}

.docs-dossier__titre {
  display: flex;
  align-items: center;
  gap: .55rem;
  /* 44 px de haut : la taille de cible tactile recommandée. */
  min-height: 2.75rem;
  padding: .45rem .85rem;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--irp-heading);
  border-radius: var(--irp-radius);
}

.docs-dossier__titre::-webkit-details-marker { display: none; }
.docs-dossier__titre:hover { background: var(--irp-surface-3); }

.docs-dossier__titre:focus-visible {
  outline: 2px solid var(--irp-cyan-600);
  outline-offset: 2px;
}

.docs-dossier__chevron {
  font-size: .8rem;
  color: var(--irp-text-muted);
  transition: transform var(--irp-transition);
}

.docs-dossier[open] > .docs-dossier__titre .docs-dossier__chevron { transform: rotate(90deg); }

.docs-dossier__icone { color: var(--irp-cyan-600); }
[data-bs-theme='dark'] .docs-dossier__icone { color: var(--irp-cyan-300); }

.docs-dossier__nom { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.docs-dossier__nombre {
  flex-shrink: 0;
  min-width: 1.75rem;
  padding: .1rem .5rem;
  border-radius: var(--irp-radius-pill);
  background: var(--irp-surface);
  font-size: .75rem;
  font-weight: 500;
  text-align: center;
  color: var(--irp-text-muted);
}

.docs-dossier__contenu { padding: .25rem .6rem .6rem; }

/* --- Rubrique : le premier niveau, plus marqué ----------------------------- */
.docs-dossier--rubrique {
  margin-bottom: .75rem;
  background: var(--irp-surface);
  box-shadow: var(--irp-shadow-sm);
  /* Ouvert par un lien #documents-<id> : ne pas passer sous l'en-tête collant. */
  scroll-margin-top: 5rem;
}

.docs-dossier--rubrique > .docs-dossier__titre {
  min-height: 3.25rem;
  padding: .6rem 1rem;
  font-size: 1.05rem;
}

.docs-dossier--rubrique > .docs-dossier__titre .docs-dossier__icone { font-size: 1.15rem; }
.docs-dossier--rubrique > .docs-dossier__contenu { padding: .25rem .85rem .85rem; }

/* Les niveaux alternent de fond pour se détacher de leur parent. */
.docs-dossier--rubrique .docs-dossier { background: var(--irp-surface-2); }
.docs-dossier--rubrique .docs-dossier .docs-dossier { background: var(--irp-surface); }

@media (prefers-reduced-motion: reduce) {
  .docs-dossier__chevron { transition: none; }
}

.docs-aucun {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--irp-border);
  border-radius: var(--irp-radius);
  color: var(--irp-text-muted);
}

.docs-aucun[hidden] { display: none; }

/* =====================================================================
   RÉSUMÉ D'UN DOCUMENT — ce que contient le fichier

   Le texte est dans la page EN ENTIER : c'est lui que la recherche
   fouille, et les résumés de réunion font volontiers mille caractères.
   Seul l'affichage l'abrège, à deux lignes, avec « Tout lire ».

   Pendant une recherche, le script remplace ces deux lignes par le
   passage trouvé, le mot mis en évidence (modules/document.js).
   ===================================================================== */

.doc-item__resume {
  margin: .25rem 0 .1rem;
  padding: 0 .85rem 0 3.4rem;  /* aligné sous le nom, pas sous l'icône */
}

.doc-item__texte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  overflow: hidden;
  color: var(--irp-text-muted);
  font-size: .82rem;
  line-height: 1.45;
}

/* Déplié : le texte reprend ses lignes, et ses paragraphes — le CSE écrit
   un sujet par ligne. Replié, les sauts valent des espaces : deux lignes
   pleines valent mieux qu'une phrase suivie d'un blanc. */
.doc-item__resume.is-deplie .doc-item__texte {
  display: block;
  -webkit-line-clamp: none;
  white-space: pre-line;
}

/* Le passage trouvé par la recherche. Fond discret : il signale, il ne
   crie pas — une liste entière surlignée ne se lit plus. */
.doc-item__texte mark {
  padding: 0 .1em;
  border-radius: 2px;
  background: var(--irp-cyan-50);
  color: inherit;
  font-weight: 600;
}

[data-bs-theme='dark'] .doc-item__texte mark {
  background: rgba(27, 157, 217, .22);
}

.doc-item__plus {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .15rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--irp-cyan-700);
  font-size: .78rem;
  font-weight: 600;
}

.doc-item__plus:hover {
  text-decoration: underline;
}

[data-bs-theme='dark'] .doc-item__plus {
  color: var(--irp-cyan-200);
}

.doc-item__plus .bi {
  display: block;
  font-size: .7em;
  transition: transform .12s ease;
}

.doc-item__resume.is-deplie .doc-item__plus .bi {
  transform: rotate(180deg);
}


/* Résumé d'un document RATTACHÉ à un contenu (actualité, page) : en
   entier, sans bouton. Ce sont des pièces choisies une à une — deux ou
   trois — et le lecteur doit savoir ce qu'il télécharge sans cliquer.
   L'espace Documents, lui, en aligne quatre-vingt-quinze par dossier et
   les abrège (§ RÉSUMÉ D'UN DOCUMENT).

   pre-line : le CSE écrit un sujet par ligne, et c'est ainsi que ça se
   lit. Aligné sous le nom, pas sous l'icône. */
.doc-item__description {
  margin: .3rem 0 .1rem;
  padding: 0 .85rem 0 3.4rem;
  color: var(--irp-text-muted);
  font-size: .82rem;
  line-height: 1.5;
  white-space: pre-line;
}