/* Lot L5 · Réunions (bibliothèque), corbeille et classement d'une réunion. Planches :
   Bibliotheque, Vide-bibliotheque. Code : graphite_folders.rs (la corbeille y est rendue,
   servie par privacy.rs). Cette feuille est chargée avant /assets/rm.css : à spécificité
   égale, un composant du socle (rm-…) l'emporte ; les pièces propres à ces pages portent
   des classes rm-lib-… et rm-trash-…. Valeurs par jetons de brand.css. Le violet ne vient
   que de la pastille `is-live` du socle. Tout marche sans JavaScript : formulaires, liens
   et <details>. */

/* ---------- Réunions · page ---------- */
/* <div class="rm-lib">(sélecteur Réunions · Agenda du téléphone)
     <div class="rm-lib-head"><h1 class="rm-title">Réunions</h1><a class="button button-quiet" href="/importer">Importer un audio</a></div>
     (champ de recherche, dossiers, en-tête du dossier ouvert, onglets d'état et « Filtres »,
      tableau, pages)</div> */
.rm-lib{min-width:0}
.rm-lib-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}

/* ---------- Réunions · recherche ---------- */
/* Le champ du socle (.rm-find.is-large) : la loupe, le champ, puis les deux façons de
   chercher (.rm-seg), qui passent sous le champ quand la place manque. */
.rm-lib form.rm-lib-find{margin-top:22px;padding:3px 3px 3px 18px;gap:4px 12px}
.rm-lib-find>svg{flex:none;width:19px;height:19px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round}
.rm-lib-find .rm-seg{flex:none}

/* ---------- Réunions · dossiers ---------- */
/* <nav class="rm-lib-folders" id="dossiers"><a class="rm-lib-folder" href="…" aria-current="true">Toutes <span>24</span></a>
     <a class="rm-lib-folder" href="…">Maison Alba <span>9</span></a>…
     <details class="rm-lib-fold"><summary class="button button-quiet">Nouveau dossier</summary>(formulaire)</details></nav> */
.rm-lib-folders{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;scroll-margin-top:24px}
.rm-lib-folder{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:var(--h-control);padding:0 16px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);color:var(--ink-soft);font:500 var(--fs-body)/1.2 var(--font-ui);text-decoration:none;overflow-wrap:anywhere}
.rm-lib-folder:hover{border-color:var(--line-strong);color:var(--ink);text-decoration:none}
.rm-lib-folder[aria-current]{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.rm-lib-folder span{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Réunions · ce qui se déplie ---------- */
/* Un bouton qui ouvre un court formulaire, à sa suite dans la page (rien ne flotte, rien ne
   sort de l'écran) : « Nouveau dossier », « Demander à ce dossier », « Filtres ».
   <details class="rm-lib-fold"><summary class="button button-quiet">Filtres</summary>
     <form class="rm-lib-fold-body" …><div><label for="…">Source</label><select …></select></div>
       <button class="button" type="submit">Filtrer</button></form></details>
   Ouvert, il prend toute la largeur de sa rangée. */
.rm-lib-fold>summary{list-style:none}
.rm-lib-fold>summary::-webkit-details-marker{display:none}
.rm-lib-fold[open]{flex:1 1 100%;min-width:0}
.rm-lib-fold[open]>summary{margin-bottom:0}
.rm-lib-fold[open]>summary.button-quiet{background:var(--sunken);color:var(--ink)}
.rm-lib-fold[open]>summary:not(.button-quiet){border-color:var(--ink)}
.rm-lib-fold-body{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.rm-lib-fold-body>div{flex:1 1 220px;min-width:0}
.rm-lib-fold-body>.rm-lib-date{flex:0 1 170px}
.rm-lib-fold-body label{display:block;margin-bottom:6px;font-size:var(--fs-note);font-weight:600}

/* ---------- Réunions · en-tête d'un dossier ---------- */
/* <section class="rm-card rm-lib-folder-card"><div class="rm-lib-folder-id"><h2 class="rm-card-title">Maison Alba</h2><p class="rm-note">…</p></div>
     <ul class="rm-lib-stats"><li><b>9</b><span>réunions</span></li><li><b>5 h 15</b><span>enregistrées</span></li>…</ul>
     <details class="rm-lib-fold rm-lib-ask">(Demander à ce dossier)</details>
     <details class="rm-more rm-lib-folder-more">(renommer, supprimer)</details></section> */
.rm-lib-folder-card{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;margin-top:22px;padding:24px 28px}
.rm-lib-folder-id{flex:1 1 300px;min-width:0}
.rm-lib-folder-id .rm-card-title{overflow-wrap:anywhere}
.rm-lib-folder-id .rm-note{margin-top:4px}
.rm-lib-stats{display:flex;flex-wrap:wrap;gap:16px 28px;margin:0;padding:0;list-style:none}
.rm-lib-stats li{display:flex;flex-direction:column;gap:2px}
.rm-lib-stats b{font:600 var(--fs-card)/1.1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-lib-stats span{font-size:var(--fs-note);color:var(--muted)}
/* Ouverte, la question passe sous la rangée, après le menu « ··· ». */
.rm-lib-ask[open]{order:1}
.rm-lib-folder-card .rm-lib-fold-body{background:var(--bg)}
.rm-lib-folder-more{margin-left:auto}
.rm-lib-folder-card>.rm-lib-ask+.rm-lib-folder-more{margin-left:-28px}
.rm-more-panel .rm-lib-rename{display:grid;gap:6px;margin-bottom:4px;padding:8px 0 6px;border-bottom:1px solid var(--line)}
.rm-lib-rename label{padding:0 12px;font-size:var(--fs-note);font-weight:600}
.rm-more-panel .rm-lib-rename input{width:auto;margin:0 6px}
.rm-lib-more-note{padding:6px 12px 8px}

/* ---------- Réunions · onglets d'état et filtres ---------- */
/* <div class="rm-lib-bar"><nav class="rm-lib-tabs"><a href="…" aria-current="true">Toutes <span>9</span></a><a href="…">Comptes rendus prêts <span>7</span></a>…</nav>
     <details class="rm-lib-fold rm-lib-filters">…</details></div>
   Les onglets et « Filtres » partagent le filet du bas ; ouverts, les filtres passent dessous
   (la largeur minimale des onglets les garde sur leur rangée). */
.rm-lib-bar{display:flex;flex-wrap:wrap;align-items:stretch;margin-top:22px}
.rm-lib-tabs{flex:1 1 0;min-width:50%;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.rm-lib-tabs::-webkit-scrollbar{display:none}
.rm-lib-tabs a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--h-control);padding:0 2px;border-bottom:2px solid transparent;color:var(--muted);font-weight:500;white-space:nowrap;text-decoration:none}
.rm-lib-tabs a:hover{color:var(--ink);text-decoration:none}
.rm-lib-tabs a[aria-current]{border-bottom-color:var(--ink);color:var(--ink)}
.rm-lib-tabs span{color:var(--muted);font-variant-numeric:tabular-nums}
.rm-lib-filters{border-bottom:1px solid var(--line)}
.rm-lib-filters[open]{padding-bottom:16px}
.rm-lib-count{margin-top:14px}
.rm-lib-count a{color:var(--ink);font-weight:600}

/* ---------- Réunions · tableau ---------- */
/* <div class="rm-lib-table-wrap"><table class="rm-lib-table"><thead>(Réunion, Participants, Date, Durée, État)</thead>
     <tbody><tr><td class="rm-lib-what"><a class="rm-lib-title" href="/reunions/…">Point de chantier · Lot B</a>
         <span class="rm-lib-note">Google Meet · dossier Maison Alba</span><span class="rm-lib-passage">(passage trouvé)</span></td>
       <td class="rm-lib-people"><span class="rm-lib-avs"><span class="rm-lib-av">CM</span>…</span></td>
       <td class="rm-lib-when"><time>jeu. 8 oct. · 14 h</time></td><td class="rm-lib-length">42 min</td>
       <td class="rm-lib-state"><span class="rm-chip is-ok">Compte rendu prêt</span></td></tr></tbody></table></div>
   Sur un téléphone, chaque ligne devient un bloc : voir plus bas. */
.rm-lib-table-wrap{margin-top:6px;overflow-x:auto}
.rm-lib-table{width:100%;min-width:820px;border-collapse:collapse;text-align:left}
.rm-lib-table th{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--muted);font-size:var(--fs-tag);font-weight:500;white-space:nowrap}
.rm-lib-table td{padding:16px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.rm-lib-table tbody tr:hover{background:var(--surface)}
.rm-lib-what{width:42%}
.rm-lib-title{display:block;color:var(--ink);font-size:15px;font-weight:600;line-height:1.4;text-decoration:none;overflow-wrap:anywhere}
.rm-lib-title:hover{text-decoration:underline;text-underline-offset:3px}
.rm-lib-note{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-note)}
.rm-lib-passage{display:block;margin-top:6px;color:var(--ink-soft);font-size:var(--fs-note);line-height:1.5;text-wrap:pretty}
.rm-lib-passage mark{padding:0 2px;border-radius:3px;background:var(--sunken);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.rm-lib-when,.rm-lib-length{white-space:nowrap;font-variant-numeric:tabular-nums}
.rm-lib-none{color:var(--muted)}
.rm-lib-avs{display:inline-flex;padding-left:6px}
.rm-lib-av{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-left:-6px;border:1px solid var(--line);border-radius:50%;background:var(--sunken);color:var(--ink);font:600 10px/1 var(--font-ui)}
.rm-lib-pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;margin-top:18px}

/* ---------- Réunions · rien à montrer ---------- */
/* Un filtre ou une recherche sans résultat : <section class="rm-lib-nothing"><h2 class="rm-card-title">Rien pour « … ».</h2>
     <p>…</p><div class="rm-lib-links"><a class="rm-link" href="…">Chercher par le sens</a>…</div></section>
   Un compte sans réunion (planche Vide-bibliotheque) : les colonnes à venir, puis ce qu'il
   faut faire. <div class="rm-lib-ghost" aria-hidden="true"><span>Réunion</span>…</div>
   <section class="rm-lib-blank"><span class="rm-empty-icon">(svg)</span><h2 class="rm-card-title">Aucune réunion pour l’instant.</h2>
     <p class="rm-lib-blank-say">…</p><p class="rm-lib-blank-more">…</p><a class="button button-primary" href="/importer">Importer un audio</a></section> */
.rm-lib-nothing,.rm-lib-blank{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.rm-lib-nothing{padding:48px 24px 24px}
.rm-lib-nothing p,.rm-lib-blank p{max-width:56ch}
.rm-lib-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px}
.rm-lib-ghost{display:flex;gap:16px;margin-top:26px;padding:12px 14px;border-block:1px solid var(--line);color:var(--muted);font-size:var(--fs-tag);font-weight:500}
.rm-lib-ghost span{flex:1 1 0;min-width:0}
.rm-lib-ghost span:first-child{flex-grow:3}
.rm-lib-blank{padding:56px 24px 24px}
.rm-lib-blank .rm-card-title{margin-top:8px;line-height:1.3}
.rm-lib-blank-say{font-size:15px}
.rm-lib-blank-more{color:var(--muted)}
.rm-lib-blank .button{margin-top:10px}

/* ---------- Réunions · tablette et téléphone ---------- */
/* Sous 1160 px, la barre latérale ne laisse plus au tableau ses 820 px : plutôt que de faire
   défiler l'état hors de l'écran, chaque ligne devient un bloc. Le titre et le lieu, puis la
   date, la durée et l'état sur une ligne (l'état passe dessous s'il est long). Les
   participants ne sont pas montrés. */
@media (max-width:1160px){
  .rm-lib-table-wrap{overflow:visible}
  .rm-lib-table{display:block;min-width:0}
  .rm-lib-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .rm-lib-table tbody{display:block}
  .rm-lib-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .rm-lib-table tbody tr:hover{background:none}
  .rm-lib-table td{display:block;padding:0;border:0}
  .rm-lib-table .rm-lib-what{flex:1 1 100%;width:auto}
  .rm-lib-table .rm-lib-people,.rm-lib-table .rm-lib-length.is-none{display:none}
  .rm-lib-when,.rm-lib-length{color:var(--muted);font-size:var(--fs-note)}
  .rm-lib-length::before{content:"· "}
  .rm-lib-state{margin-left:auto}
}
/* Sous 1000 px, les onglets d'état défilent : celui qui est choisi passe en tête, pour
   rester visible. */
@media (max-width:1000px){
  .rm-lib-tabs a[aria-current]{order:-1}
}

/* ---------- Réunions · téléphone ---------- */
@media (max-width:760px){
  .rm-lib-head,.rm-lib>.rm-title{margin-top:14px}
  .rm-lib form.rm-lib-find{margin-top:14px;padding-left:14px}
  .rm-lib-find .rm-seg{flex:1 1 100%}
  .rm-lib-folders{gap:8px;margin-top:18px}
  .rm-lib-folder{padding:0 14px}
  .rm-lib-folder-card{gap:16px 24px;margin-top:18px;padding:20px}
  .rm-lib-folder-card>.rm-lib-ask+.rm-lib-folder-more{margin-left:auto}
  .rm-lib-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:1 1 100%}
  .rm-lib-bar{margin-top:18px}
  .rm-lib-tabs{gap:20px}
  .rm-lib-fold-body>.rm-lib-date{flex:1 1 130px}
  .rm-lib-ghost{display:none}
  .rm-lib-blank{align-items:flex-start;padding:28px 0 8px;text-align:left}
  .rm-lib-nothing{padding:32px 0 16px}
}

/* ---------- Corbeille ---------- */
/* <div class="rm-page rm-trash"><div class="rm-backbar"><a class="rm-back" href="/parametres">Paramètres</a></div>
     <h1 class="rm-title">Corbeille</h1><p class="rm-sub">…</p>
     <section class="rm-card rm-trash-list"><div class="rm-trash-row">
       <div class="rm-trash-what"><b>Point budget</b><span class="rm-note">Google Meet · lundi 5 octobre à 10 h</span><p class="rm-trash-when">Effacement prévu le …</p></div>
       <div class="rm-trash-actions"><form …><button class="button">Restaurer</button></form>
         <details class="rm-trash-purge"><summary class="button button-quiet">Effacer définitivement</summary>(case à cocher, bouton)</details></div></div>…</section></div>
   Aucun bouton plein : restaurer et effacer sont des actions qui engagent, en contour. */
.rm-trash .rm-backbar{margin-bottom:14px}
.rm-trash .rm-empty,.rm-trash-list{margin-top:26px}
.rm-trash-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px;padding:18px 22px;border-top:1px solid var(--line-soft)}
.rm-trash-row:first-child{border-top:0}
.rm-trash-what{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:2px}
.rm-trash-what b{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.rm-trash-when{margin-top:6px;font-size:var(--fs-note)}
.rm-trash-when a{color:var(--ink);font-weight:600}
.rm-trash-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.rm-trash-actions form{margin:0}
.rm-trash-purge>summary{list-style:none}
.rm-trash-purge>summary::-webkit-details-marker{display:none}
.rm-trash-purge[open]{flex:1 1 100%}
.rm-trash-purge[open]>summary{margin-bottom:0;background:var(--sunken);color:var(--ink)}
.rm-trash-purge form{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:440px;margin-top:10px}
@media (max-width:760px){
  .rm-trash .rm-backbar{margin-bottom:10px}
  .rm-trash-row{padding:16px}
}

/* ---------- Classement d'une réunion (vue Détails de la fiche) ---------- */
/* <details class="rm-lib-classify"><summary>Classer dans un dossier <span class="rm-chip">Maison Alba</span></summary>
     <div class="rm-lib-classify-body"><p class="rm-note">…</p>
       <form …><label for="meeting-folder">Dossier</label><select id="meeting-folder" …></select><button class="button">Enregistrer le classement</button></form>
       <a class="rm-link" href="/bibliotheque#dossiers">Gérer mes dossiers</a></div></details> */
.rm-lib-classify{padding:0 16px;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--surface)}
.rm-lib-classify>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:var(--h-control);list-style:none;font-size:var(--fs-note);font-weight:600;cursor:pointer}
.rm-lib-classify>summary::-webkit-details-marker{display:none}
.rm-lib-classify>summary::before{content:"+";flex:none;width:10px;color:var(--muted);font-weight:500}
.rm-lib-classify[open]>summary{margin-bottom:0}
.rm-lib-classify[open]>summary::before{content:"−"}
.rm-lib-classify-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:2px 0 12px}
.rm-lib-classify form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 10px;width:100%;margin:0}
.rm-lib-classify label{flex:1 1 100%;font-size:var(--fs-note);font-weight:600}
.rm-lib-classify form select{flex:1 1 200px;width:auto;min-width:0;max-width:340px}