/* EWE Fichiers — l'explorateur de documents.
   Pose par-dessus ewe.css, dont il reprend la palette, les fontes et le rail :
   c'est la meme application, vue autrement. Rien n'est redefini ici de ce qui
   existe deja la-bas. */

/* --------------------------------------------------- bascule des vues --- */

.bascule { display:flex; gap:4px; padding:3px; border-radius:11px;
           background:rgba(0,0,0,.24); border:1px solid var(--trait); }
.bascule-vue {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 6px; border-radius:8px;
  color:var(--brume); font-size:12.5px; text-decoration:none;
  transition:background .16s ease, color .16s ease;
}
.bascule-vue:hover { color:var(--blanc); background:rgba(245,245,245,.05); }
.bascule-vue.actuelle {
  color:var(--blanc); background:rgba(230,0,191,.16);
  border:1px solid rgba(230,0,191,.34); padding:7px 5px;
}
.bascule-vue svg {
  width:15px; height:15px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* L'espace se lit sur deux lignes : son nom, et ce qu'il contient. */
.espace { flex-wrap:wrap; text-align:left; }
.espace .item-extrait { flex-basis:100%; margin-top:2px; }

/* ------------------------------------------------------- l'explorateur --- */

.explorateur { flex:1; min-width:0; display:flex; flex-direction:column; }

.barre {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 24px 12px; border-bottom:1px solid var(--trait);
}

.fil-ariane { flex:1; min-width:0; display:flex; align-items:center;
              flex-wrap:wrap; gap:2px; font-size:14px; }
.miette {
  padding:3px 6px; border-radius:7px;
  color:var(--brume); font:inherit; cursor:pointer;
  transition:color .16s ease, background .16s ease;
}
.miette:hover { color:var(--blanc); background:rgba(245,245,245,.06); }
.miette.actuelle { color:var(--blanc); font-weight:600; cursor:default; }
.miette-sep { color:var(--brume-basse); }

.barre-actions { display:flex; gap:8px; flex:none; }

.outil {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:9px;
  border:1px solid var(--trait); background:rgba(245,245,245,.04);
  color:var(--brume); font:inherit; font-size:12.5px; text-decoration:none;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.outil:hover {
  border-color:rgba(230,0,191,.45); color:var(--blanc);
  background:rgba(230,0,191,.10);
}
.outil svg {
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}

/* ------------------------------------------------------------ la liste --- */

.contenu { flex:1; min-height:0; overflow-y:auto; padding:14px 24px 24px; }
.table { max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:2px; }

.ligne {
  display:flex; align-items:center; gap:8px;
  border-radius:11px; padding-right:8px;
  transition:background .14s ease;
}
.ligne:hover { background:rgba(245,245,245,.045); }

.ligne-principal {
  flex:1; min-width:0; display:flex; align-items:center; gap:13px;
  padding:10px 12px; border-radius:11px;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
}

.vignette {
  flex:none; display:grid; place-items:center;
  width:36px; height:36px; border-radius:9px;
  background:rgba(230,0,191,.14); color:var(--rose);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.02em;
}
.vignette-dossier { background:rgba(144,130,255,.16); color:var(--violet); }
.vignette-dossier svg {
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linejoin:round;
}

.ligne-texte { display:flex; flex-direction:column; min-width:0; gap:2px; }
.ligne-nom {
  font-size:14px; color:var(--blanc);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ligne-meta { font-size:11.5px; color:var(--brume-basse); }

/* Les actions n'apparaissent qu'au survol : une liste de documents doit se
   lire, pas ressembler a un tableau de bord. Sur ecran tactile il n'y a pas
   de survol — elles restent visibles. */
.ligne-actions { display:flex; gap:2px; flex:none; opacity:0;
                 transition:opacity .14s ease; }
.ligne:hover .ligne-actions, .ligne-actions:focus-within { opacity:1; }
@media (hover:none) { .ligne-actions { opacity:1; } }

.action-icone {
  display:grid; place-items:center; width:32px; height:32px;
  border-radius:8px; color:var(--brume-basse); cursor:pointer;
  transition:color .16s ease, background .16s ease;
}
.action-icone:hover { color:var(--blanc); background:rgba(245,245,245,.08); }
.action-icone.danger:hover { color:var(--corail); background:rgba(255,130,132,.12); }
.action-icone svg {
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

.vide { max-width:520px; margin:14vh auto 0; text-align:center; color:var(--brume); }
.vide-titre { margin:0 0 6px; font-size:16px; color:var(--blanc); }
.vide p { margin:0; font-size:13.5px; }

.explorateur .mention { padding:0 24px calc(14px + env(safe-area-inset-bottom,0px)); margin:0; }

/* ------------------------------------------------------- la visionneuse --- */

.visionneuse {
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  padding:24px; background:rgba(10,17,22,.78); backdrop-filter:blur(3px);
}
.visionneuse-cadre {
  width:min(1000px,100%); height:min(88vh,100%);
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:16px; border:1px solid var(--trait-fort);
  background:var(--nuit); box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.visionneuse-tete {
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-bottom:1px solid var(--trait);
}
.visionneuse-titre {
  flex:1; min-width:0; margin:0; font-size:14.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.visionneuse-actions { display:flex; gap:7px; flex:none; }
.visionneuse-corps { flex:1; min-height:0; overflow:auto; }

.vue-pdf { width:100%; height:100%; border:0; background:#fff; }
.vue-image { display:block; max-width:100%; margin:0 auto; }
.vue-texte {
  margin:0; padding:22px 26px; font-family:var(--mono); font-size:12.5px;
  line-height:1.65; white-space:pre-wrap; word-break:break-word;
}
.vue-attente { padding:40px 26px; text-align:center; color:var(--brume); }

/* ------------------------------------------ le Markdown, mis en page --- */

/* C'est la raison d'etre de la visionneuse : un compte rendu doit se lire
   comme un document, pas comme du texte avec des dieses. */
.vue-markdown {
  max-width:760px; margin:0 auto; padding:34px 30px 60px;
  font-size:15px; line-height:1.72; color:var(--blanc);
}
.vue-markdown h2, .vue-markdown h3, .vue-markdown h4,
.vue-markdown h5, .vue-markdown h6 {
  margin:1.9em 0 .55em; line-height:1.25; font-weight:700;
}
.vue-markdown > :first-child { margin-top:0; }
.vue-markdown h2 {
  font-family:var(--display); font-size:26px;
  padding-bottom:.3em; border-bottom:1px solid var(--trait);
}
.vue-markdown h3 { font-size:19px; color:var(--rose); }
.vue-markdown h4 { font-size:16px; }
.vue-markdown h5, .vue-markdown h6 { font-size:14px; color:var(--brume); }
.vue-markdown p { margin:0 0 1.05em; }
.vue-markdown ul, .vue-markdown ol { margin:0 0 1.05em; padding-left:1.45em; }
.vue-markdown li { margin:.3em 0; }
.vue-markdown li::marker { color:var(--magenta); }
.vue-markdown a { color:var(--rose); text-underline-offset:2px; }
.vue-markdown strong { color:#fff; }
.vue-markdown hr { margin:2em 0; border:0; border-top:1px solid var(--trait); }
.vue-markdown blockquote {
  margin:0 0 1.05em; padding:.2em 0 .2em 1.1em;
  border-left:2px solid rgba(230,0,191,.5); color:var(--brume);
}
.vue-markdown code {
  font-family:var(--mono); font-size:.86em;
  background:rgba(0,0,0,.34); padding:1px 5px; border-radius:5px;
}
.vue-markdown pre {
  margin:0 0 1.2em; padding:14px 16px; border-radius:11px;
  background:rgba(0,0,0,.38); border:1px solid var(--trait);
  overflow-x:auto;
}
.vue-markdown pre code { background:none; padding:0; font-size:12.5px; line-height:1.6; }

/* Un tableau large defile dans sa propre boite : la page, elle, ne bouge pas. */
.vue-table { max-width:760px; margin:0 auto 1.2em; padding:0 30px; overflow-x:auto; }
.visionneuse-corps > .vue-table { padding:30px; margin-bottom:0; }
.vue-table table { width:100%; border-collapse:collapse; font-size:13.5px; }
.vue-table th, .vue-table td {
  padding:8px 11px; text-align:left; border:1px solid var(--trait);
  vertical-align:top;
}
.vue-table th {
  background:rgba(230,0,191,.10); color:var(--blanc); font-weight:600;
  position:sticky; top:0;
}
.vue-table tbody tr:nth-child(even) { background:rgba(245,245,245,.025); }

/* ---------------------------------------------------------- telephone --- */

@media (max-width:860px) {
  .barre { padding:14px 15px 10px; }
  .contenu { padding:12px 15px 20px; }
  .explorateur .mention { padding-left:15px; padding-right:15px; }
  .barre-actions { width:100%; }
  .outil { flex:1; justify-content:center; }
  .visionneuse { padding:0; }
  .visionneuse-cadre { width:100%; height:100%; border-radius:0; border:0; }
  .vue-markdown { padding:24px 18px 50px; font-size:15.5px; }
  .vue-table { padding:0 18px; }
}

/* Sur tres petit ecran, le libelle des outils encombre : l'icone suffit. */
@media (max-width:420px) {
  .visionneuse-actions .outil span { display:none; }
}

/* Le rail ne porte plus que la bascule : on garde la respiration, la liste
   des espaces ayant disparu au profit d'une arborescence unique. */
.rail-vide { flex:1; min-height:0; }

/* A la racine, il n'y a nulle part ou deposer : les outils le disent. */
.outil[disabled] { opacity:.35; cursor:default; }
.outil[disabled]:hover { border-color:var(--trait); color:var(--brume); background:rgba(245,245,245,.04); }

/* Un dossier de tete se distingue : on n'y fait pas le menage. */
.ligne-nom { font-variant-numeric:tabular-nums; }