/* =========================================================================
   A3789 — chantier : mises en page des quatre briques
   ========================================================================= */

/* ============================== GED =================================== */
.ged {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--gouttiere);
  align-items: start;
}
@media (max-width: 900px) {
  .ged { grid-template-columns: minmax(0, 1fr); }
  /* L'arbre devient un tiroir appele par le bouton « Dossiers ». */
  .ged > .ged-arbre {
    position: fixed; z-index: 50; inset: 0 auto 0 0;
    width: min(320px, 88vw);
    max-height: 100%;
    overflow: auto;
    border-radius: 0;
    transform: translateX(-102%);
    transition: transform .15s ease-out;
  }
  .ged[data-tiroir="ouvert"] > .ged-arbre { transform: none; }
  .ged[data-tiroir="ouvert"]::before {
    content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.4);
  }
}
@media (min-width: 901px) { .ged-fermer-tiroir { display: none; } }

.ged-arbre { background: var(--surface); }
.arbre { list-style: none; margin: 0; padding: 4px 0; }
.arbre ul { list-style: none; margin: 0; padding-left: 14px; border-left: 1px solid var(--filet); }
.arbre-noeud { display: flex; align-items: center; gap: 2px; }
.arbre-noeud .btn { min-height: 40px; }
.arbre-nom {
  flex: 1 1 auto; min-width: 0; text-align: left; justify-content: flex-start;
  border: 0; background: transparent; font: inherit; color: var(--encre);
  padding: 0 6px; min-height: 40px; display: flex; align-items: center; gap: 6px;
  cursor: pointer; border-radius: var(--rayon);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arbre-nom:hover { background: var(--surface-3); }
.arbre-noeud[data-actif="1"] > .arbre-nom {
  background: var(--accent-voile); color: var(--accent-texte); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent-texte);
}
.arbre-plier {
  width: 28px; min-width: 28px; height: 40px; border: 0; background: transparent;
  color: var(--encre-faible); cursor: pointer; font-size: .8rem;
}
.arbre-compte { color: var(--encre-faible); font-size: .8rem; font-weight: 400; }

/* zone de depot + liste de documents */
.depot { position: relative; }
.depot[data-survol="1"]::after {
  content: "Déposer ici pour téléverser";
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-voile); color: var(--accent-texte);
  border: 2px dashed var(--accent-texte); font-weight: 700;
}
.chemin-fil { font-size: .88rem; color: var(--encre-faible); padding: 6px 10px; border-bottom: 1px solid var(--filet); }
.chemin-fil b { color: var(--encre); }

.liste-docs { list-style: none; margin: 0; padding: 0; }
.liste-docs > li { border-bottom: 1px solid var(--filet); display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.liste-docs > li:last-child { border-bottom: 0; }
.doc-ouvrir {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; font: inherit; color: var(--encre);
  text-align: left; padding: 6px 2px; min-height: 44px; cursor: pointer;
}
.doc-ouvrir:hover { background: var(--surface-3); }
.doc-vignette {
  width: 34px; min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--filet-fort); font-size: .62rem; font-weight: 700;
  color: var(--accent-texte); background: var(--surface-2); text-transform: uppercase;
}
.doc-nom { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.doc-meta { display: block; font-size: .8rem; color: var(--encre-faible); }
.pastille {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 5px;
  border: 1px solid var(--filet-fort); border-radius: var(--rayon); color: var(--encre-doux);
  vertical-align: 1px;
}
.pastille[data-etat="en_cours"] { color: var(--alerte); border-color: var(--alerte); }
.pastille[data-etat="relue"] { color: var(--ok); border-color: var(--ok); }

/* progression de televersement */
.televersements { padding: 8px; border-bottom: 1px solid var(--filet); background: var(--surface-2); }
.tv-ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: .85rem; margin-bottom: 6px; }
.tv-barre { grid-column: 1 / -1; height: 8px; background: var(--surface-3); border: 1px solid var(--filet); }
.tv-barre > i { display: block; height: 100%; background: var(--accent-fond); width: 0; }
.tv-ligne[data-etat="echec"] .tv-barre > i { background: var(--echec); }
.tv-ligne[data-etat="fini"] .tv-barre > i { background: var(--ok); }

/* ========================== VISIONNEUSE =============================== */
/* Le cadre fait 95 % de la fenetre (Georges l'a demande ainsi) : il reste
   donc une bande de l'ecran derriere lui. Le voile est assez dense pour que
   l'en-tete de la page ne s'y lise plus a moitie coupe. */
#visionneuse { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center; }
#visionneuse[hidden] { display: none; }
.vis-cadre {
  width: 95vw; height: 95vh;            /* Georges a dit 95 % */
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-top: 3px solid var(--accent-texte);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.vis-tete { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-bottom: 1px solid var(--filet); background: var(--surface-2); }
.vis-titre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.vis-compteur { font-variant-numeric: tabular-nums; font-size: .88rem; color: var(--encre-doux); min-width: 9ch; text-align: center; }
/* L'indicateur de zoom n'a pas besoin de la largeur d'un « page 1 / 40 » :
   avec 9ch, « − » et « + » etaient separes par un grand vide. */
.vis-zoom { min-width: 5ch; }
.vis-corps { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; }
.vis-doc { overflow: auto; background: var(--surface-3); min-height: 0; padding: 10px; text-align: center; }
/* PAS de max-width ici : la largeur est posee par le zoom, en pixels. Avec
   « max-width: 100% », un agrandissement etait ecrase par la feuille de
   style et les boutons + / − restaient sans effet visible. La zone defile. */
.vis-doc canvas { display: block; margin: 0 auto 10px; background: #fff; border: 1px solid var(--filet-fort); }
.vis-doc img { display: block; margin: 0 auto; background: #fff; border: 1px solid var(--filet-fort); }
.vis-trans { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-left: 1px solid var(--filet); min-height: 0; }
.vis-trans textarea { width: 100%; height: 100%; border: 0; border-radius: 0; resize: none; padding: 10px; font-size: .95rem; }
.vis-trans-tete { padding: 6px 8px; border-bottom: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--surface-2); }
.vis-trans-pied { padding: 6px 8px; border-top: 1px solid var(--filet); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--surface-2); }
.etat-sauvegarde { font-size: .85rem; font-weight: 600; color: var(--encre-faible); }
.etat-sauvegarde[data-etat="cours"] { color: var(--alerte); }
.etat-sauvegarde[data-etat="ok"] { color: var(--ok); }
.etat-sauvegarde[data-etat="echec"] { color: var(--echec); }

/* Panneau de retranscription FERME tant que le texte deja enregistre n'est
   pas revenu du service. L'etat se voit : hachures, curseur d'attente, champ
   grise. Aucune frappe ne peut y etre perdue. */
.vis-cadre[data-transcription="chargement"] .vis-trans textarea,
.vis-cadre[data-transcription="echec"] .vis-trans textarea {
  background: repeating-linear-gradient(
    135deg, var(--surface-2), var(--surface-2) 9px, var(--surface-3) 9px, var(--surface-3) 18px);
  color: var(--encre-faible);
  cursor: progress;
}
.vis-cadre[data-transcription="echec"] .vis-trans textarea { cursor: not-allowed; }
.vis-cadre[data-transcription="echec"] .vis-trans { border-left-color: var(--echec); }

@media (max-width: 860px) {
  .vis-cadre { width: 100vw; height: 100vh; }
  .vis-corps { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .vis-trans { border-left: 0; border-top: 1px solid var(--filet); }
  .vis-titre { max-width: 100%; flex: 1 1 100%; order: -1; }
  /* Au doigt, 36 px ne suffisent pas : tous les boutons de la visionneuse
     reprennent la cible tactile de la maison. Les onglets, eux, sont deja
     bons et ne sont pas touches. */
  .vis-cadre .btn-petit { min-height: var(--cible); padding: 0 11px; }
}
/* « document en grand » masque la retranscription (utile au telephone) */
.vis-cadre[data-plein="1"] .vis-trans { display: none; }
.vis-cadre[data-plein="1"] .vis-corps { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }

/* =========================== TABLEAUX ================================= */
.tab-enveloppe { overflow: auto; max-width: 100%; }
table.grille { border-collapse: collapse; width: max-content; min-width: 100%; background: var(--surface); }
table.grille th, table.grille td {
  border: 1px solid var(--filet); padding: 0; vertical-align: middle;
  min-width: 120px; max-width: 340px;
}
table.grille th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  border-bottom: 2px solid var(--accent-texte);
  text-align: left; font-size: .85rem;
}
.th-inner { display: flex; align-items: center; gap: 4px; padding: 4px 6px; min-height: 44px; }
.th-nom { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-type { font-size: .7rem; color: var(--encre-faible); font-weight: 400; display: block; }
/* En-tete de la colonne des « ⋯ » : present, mais discret. */
.th-actions { font-size: .72rem; color: var(--encre-faible); text-transform: uppercase; letter-spacing: .04em; }
table.grille td.cellule { cursor: text; }
.cellule-vue {
  display: block; padding: 10px 8px; min-height: 44px; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; background: transparent; font: inherit; color: var(--encre); text-align: left;
}
.cellule-vue:hover { background: var(--accent-voile); }
td.cellule input, td.cellule select { border: 2px solid var(--accent-texte); border-radius: 0; min-height: 44px; }
td.num, .cellule-vue.num { text-align: right; font-variant-numeric: tabular-nums; }
/* La colonne des « ⋯ » ne prend que la place de son bouton : « width: 1% »
   dit au navigateur de la reduire au contenu quand la table s'etale. */
td.actions-ligne { min-width: 0; width: 1%; white-space: nowrap; position: sticky; left: 0; background: var(--surface-2); z-index: 1; }
th.coin { position: sticky; left: 0; z-index: 3; min-width: 0; width: 1%; white-space: nowrap; }
.grille tbody tr:nth-child(even) td { background: var(--surface-2); }
.grille tbody tr:nth-child(even) td.cellule:hover { background: var(--accent-voile); }

.liste-fiches { list-style: none; margin: 0; padding: 0; }
.liste-fiches li { border-bottom: 1px solid var(--filet); }
.liste-fiches li:last-child { border-bottom: 0; }
.fiche-lien {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 6px 10px; border: 0; background: transparent; font: inherit; color: var(--encre);
  text-align: left; cursor: pointer; text-decoration: none;
}
.fiche-lien:hover { background: var(--surface-3); }
.fiche-lien b { display: block; }
.fiche-lien small { color: var(--encre-faible); }

/* ============================== WIKI ================================== */
.wiki-edition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gouttiere); align-items: stretch; }
.wiki-edition textarea { min-height: 58vh; font-family: var(--mono); font-size: .92rem; }
.wiki-apercu { padding: 12px 14px; overflow: auto; max-height: 70vh; }
@media (max-width: 860px) {
  .wiki-edition { grid-template-columns: minmax(0, 1fr); }
  .wiki-edition[data-panneau="edition"] .wiki-cote-apercu { display: none; }
  .wiki-edition[data-panneau="apercu"] .wiki-cote-edition { display: none; }
}
@media (min-width: 861px) { .wiki-bascule { display: none; } }

/* rendu markdown maison */
.md { line-height: 1.55; }
.md h1, .md h2, .md h3, .md h4 { color: var(--accent-texte); }
.md h1 { font-size: 1.4rem; border-bottom: 2px solid var(--accent-texte); padding-bottom: 3px; }
.md h2 { font-size: 1.18rem; border-bottom: 1px solid var(--filet); padding-bottom: 2px; }
.md code { font-family: var(--mono); background: var(--surface-3); padding: 1px 4px; font-size: .9em; }
.md pre { background: var(--surface-3); border: 1px solid var(--filet); padding: 10px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 0 0 .7em; padding: 4px 12px; border-left: 3px solid var(--accent-texte); color: var(--encre-doux); background: var(--surface-2); }
.md table { border-collapse: collapse; margin-bottom: .8em; }
.md th, .md td { border: 1px solid var(--filet); padding: 5px 8px; text-align: left; }
.md th { background: var(--surface-2); }
.md hr { border: 0; border-top: 1px solid var(--filet-fort); }
.md .lien-doc { font-weight: 700; }
.md-enveloppe-table { overflow-x: auto; }

/* ============================== PERSO ================================= */
.perso-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gouttiere); align-items: start; }
.perso-journal { list-style: none; margin: 0; padding: 0; }

/* ============================ divers ================================== */
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gouttiere); align-items: start; }
.pile { display: flex; flex-direction: column; gap: var(--gouttiere); }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }