/* ==========================================================================
   VIVMED Drive - feuille de style
   Charte reprise de VIV MED ONE. La STRUCTURE est celle de Google Drive :
   l'utilisateur qui arrive ne doit pas avoir a reapprendre ou cliquer.
   ========================================================================== */


:root{
  /* Echelle typographique remontee d'un cran le 01/09/2026 : le Drive se
     lit toute la journee, 12 px pour une date etait trop petit. */
  --ech:1;
  /* Charte VIV MED ONE */
  --indigo:#252550;
  --indigo-d:#1f1b3c;
  --mauve:#b8a2ce;
  --rose:#f7cdd4;
  --rose-l:#f7e6f0;
  --teal:#82c0c7;
  --ink:#333;
  --muted:#666;
  --bg:#f5f5f5;

  --surface:#fff;
  --line:#e6e4ee;
  --line-soft:#f0eff5;
  --hover:#faf9fc;
  --select:#f7e6f0;
  --select-line:#e9c9d8;

  /* Couleurs de type de fichier : volontairement conventionnelles.
     C'est le repere que l'utilisateur a deja, on ne le deplace pas. */
  --doc:#2a5b9e;
  --sheet:#1e7e34;
  --slide:#a15c00;
  --pdf:#b3261e;
  --img:#7a4fa3;
  --zip:#5a5a6a;

  --radius:12px;
  --radius-s:8px;
  --shadow:0 1px 2px rgba(37,37,80,.08), 0 4px 16px rgba(37,37,80,.06);
  --shadow-l:0 8px 32px rgba(37,37,80,.16);
  /* DEUX familles, et la distinction est le point important.

     Degular est une police d'AFFICHAGE : dessinee pour des titres, avec
     un approche serre et des formes caracteristiques. A 14 px, dans une
     liste de noms de fichiers, de dates et de tailles qu'on parcourt
     toute la journee, elle se lit mal — ce n'est pas son travail.

     Le texte courant passe donc aux polices systeme : Segoe UI Variable
     sous Windows, SF sous macOS et iOS, Roboto sous Android. Elles sont
     dessinees et optimisees pour exactement cet usage, deja installees,
     et rendues avec le hinting du systeme.

     Degular reste sur la marque et les titres, ou elle est lue une fois
     et porte l'identite. */
  --sans:system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI',
         Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* LA POLICE DE TITRAGE VIENT DE marque.css, PAS D'ICI.
     Ce fichier est commun aux deux sites ; la police, elle, ne l'est pas —
     Degular est sous licence acquise pour VIVMED. Sans marque.css, on
     retombe sur la police systeme, ce qui reste lisible.
     Voir public/marque.css, pose par site et jamais versionne. */
  --titre:var(--sans);

  --header-h:64px;
  --side-w:256px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* L'attribut hidden ne pose display:none que par la feuille par defaut du
   navigateur : la moindre regle explicite (display:flex, display:grid) le
   neutralise sans prevenir. On lui redonne la priorite une fois pour toutes. */
[hidden]{ display:none !important; }
html,body{ height:100%; }
/* La marque et les grands titres gardent Degular : lus une fois, ils portent
   l'identite sans genrer la lecture du contenu. */
.brand .name,.marque-tiroir,.crumbs button:last-child,
.loginbox h1,.partagebox h1,.partagebox .p-titre,
.empty .t,.dlg h3{ font-family:var(--titre); }

body{
  margin:0; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased;
}
button,input,select{ font:inherit; color:inherit; }
button{ cursor:pointer; border:none; background:none; }
a{ color:var(--indigo); }

/* ---------------------------------------------------------------- en-tete */
.header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:30;
  display:flex; align-items:center; gap:16px; padding:0 16px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; width:calc(var(--side-w) - 16px); flex:none; }
.brand img{ height:30px; width:auto; display:block; }
.brand .sep{ width:1px; height:24px; background:var(--line); }
.brand .name{ font-size:20px; font-weight:400; color:var(--indigo); letter-spacing:.2px; white-space:nowrap; }
.brand .name b{ font-weight:700; }

.search{ position:relative; flex:1; max-width:720px; }
.search input{
  width:100%; height:44px; padding:0 44px 0 46px; border:1px solid transparent;
  border-radius:999px; background:var(--bg); outline:none; transition:.15s;
}
.search input:focus{ background:var(--surface); border-color:var(--line); box-shadow:var(--shadow); }
.search .ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.search .clear{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); display:none; padding:4px; border-radius:50%; }
.search.filled .clear{ display:block; }
.search .clear:hover{ background:var(--line-soft); }

.header .spacer{ flex:1; }
.avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--indigo); color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; letter-spacing:.5px;
}
.usermenu{ position:relative; }
.usercard{
  position:absolute; right:0; top:46px; width:280px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-l); display:none; text-align:center;
}
.usercard.open{ display:block; }
.usercard .big{ width:64px; height:64px; font-size:26px; margin:0 auto 10px; }
.usercard .nom{ font-weight:700; font-size:17px; }
.usercard .mail{ color:var(--muted); font-size:14px; margin-bottom:14px; word-break:break-all; }

/* --------------------------------------------------------------- barre laterale */
.side{
  position:fixed; top:var(--header-h); left:0; bottom:0; width:var(--side-w);
  padding:16px 12px; display:flex; flex-direction:column; gap:4px;
  background:var(--bg); z-index:20;
}
.newbtn{
  display:flex; align-items:center; gap:12px; height:52px; padding:0 22px 0 18px;
  margin-bottom:14px; border-radius:16px; align-self:flex-start;
  background:var(--indigo); color:#fff; font-size:16px; font-weight:400;
  box-shadow:var(--shadow); transition:.15s;
}
.newbtn:hover{ background:var(--indigo-d); box-shadow:var(--shadow-l); }
.newbtn svg{ flex:none; }

.navitem{
  display:flex; align-items:center; gap:14px; height:40px; padding:0 14px;
  border-radius:0 999px 999px 0; margin-right:8px; color:var(--ink);
  font-size:15px; text-align:left; width:100%;
}
.navitem:hover{ background:#ecebf2; }
.navitem.active{ background:var(--select); color:var(--indigo); font-weight:700; }
.navitem svg{ flex:none; color:var(--muted); }
.navitem.active svg{ color:var(--indigo); }

.side .grow{ flex:1; }
.quota{ padding:14px 14px 6px; border-top:1px solid var(--line); margin:8px 8px 0; }
.quota .bar{ height:6px; border-radius:3px; background:#e3e1ea; overflow:hidden; margin:8px 0 6px; }
.quota .fill{ height:100%; background:linear-gradient(90deg,var(--teal),var(--mauve)); width:0; transition:width .4s; }
.quota .txt{ font-size:13px; color:var(--muted); }

/* ------------------------------------------------------------------ contenu */
.main{
  position:fixed; top:var(--header-h); left:var(--side-w); right:0; bottom:0;
  background:var(--surface); border-radius:var(--radius) 0 0 0;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.toolbar{
  display:flex; align-items:center; gap:10px; padding:14px 22px 10px; flex:none;
}
.crumbs{ display:flex; align-items:center; gap:2px; flex:1; min-width:0; flex-wrap:wrap; }
.crumbs button{
  font-size:23px; font-weight:400; color:var(--ink); padding:5px 10px; border-radius:var(--radius-s);
  max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.crumbs button:hover{ background:var(--hover); }
.crumbs button:last-child{ font-weight:700; }
.crumbs .chev{ color:var(--muted); flex:none; }

.iconbtn{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted); flex:none; }
.iconbtn:hover{ background:var(--hover); color:var(--ink); }
.iconbtn.on{ background:var(--select); color:var(--indigo); }

/* barre d'actions sur selection
   Elle se SUPERPOSE a la barre d'outils au lieu de s'inserer sous elle.
   Inseree dans le flux, elle poussait toute la liste vers le bas des qu'un
   element etait selectionne : entre les deux clics d'un double-clic, la ligne
   visee avait bouge et c'est la voisine qui s'ouvrait. Le bloc .barres lui
   sert de repere, si bien qu'elle couvre exactement la hauteur de la barre
   d'outils, quelle que soit celle-ci. */
.barres{ position:relative; flex:none; }
.selbar{
  position:absolute; inset:0; z-index:4;
  display:none; align-items:center; gap:8px; padding:0 22px;
  background:var(--select); border-bottom:1px solid var(--select-line);
}
.selbar.on{ display:flex; }
.selbar .count{ font-weight:700; color:var(--indigo); margin-right:6px; }
.selbar button.act{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  border-radius:999px; color:var(--indigo); font-size:14px;
}
.selbar button.act:hover{ background:rgba(37,37,80,.08); }

/* en-tetes de colonnes */
.cols{
  display:grid; grid-template-columns:1fr 190px 190px 110px 44px; gap:12px;
  padding:8px 22px; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--muted); flex:none; text-transform:none;
}
.cols span{ user-select:none; }
.cols .r{ text-align:right; }

.list{ flex:1; overflow:auto; padding:4px 0 40px; }

.row{
  display:grid; grid-template-columns:1fr 190px 190px 110px 44px; gap:12px;
  align-items:center; padding:0 22px; height:50px; cursor:default;
  border-bottom:1px solid var(--line-soft);
  /* Le double-clic ouvre un dossier : sans ceci, il surligne aussi le texte
     de la ligne, ce qui salit l'affichage a chaque ouverture. */
  user-select:none; -webkit-user-select:none;
}
.selbar,.cols,.crumbs,.side,.quota{ user-select:none; }
.row:hover{ background:var(--hover); }
.row.sel{ background:var(--select); }
.row .nm{ display:flex; align-items:center; gap:14px; min-width:0; }
.row .nm .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .meta{ color:var(--muted); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .r{ text-align:right; }
.row .more{ opacity:0; }
.row:hover .more, .row.sel .more{ opacity:1; }

/* pastille de type */
.ficon{ width:28px; height:28px; border-radius:6px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; letter-spacing:.3px; }
.ficon.folder{ background:none; color:var(--mauve); }
.ficon.doc{ background:var(--doc); }
.ficon.sheet{ background:var(--sheet); }
.ficon.slide{ background:var(--slide); }
.ficon.pdf{ background:var(--pdf); }
.ficon.img{ background:var(--img); }
.ficon.zip{ background:var(--zip); }
.ficon.other{ background:#9a9aa5; }

/* vue grille */
.list.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; padding:16px 22px 40px; align-content:start; }
.list.grid .cols{ display:none; }
.list.grid .row{
  display:block; height:auto; padding:0; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:var(--surface);
}
.list.grid .row:hover{ box-shadow:var(--shadow); background:var(--surface); }
.list.grid .row.sel{ border-color:var(--select-line); background:var(--select); }
.list.grid .nm{ padding:10px 12px; gap:9px; }
.list.grid .meta,.list.grid .more{ display:none; }
.list.grid .vign{ height:88px; background:var(--bg); display:flex; align-items:center; justify-content:center; border-top:1px solid var(--line-soft); }
.list.grid .vign .ficon{ width:38px; height:38px; border-radius:9px; font-size:12px; }

/* ------------------------------------------------------- page de partage */
/* Seul contact d'une personne exterieure avec VIVMED : elle arrive par un
   courriel inattendu, sur un domaine inconnu, pour un document medical. */
.partagebox{ max-width:460px; text-align:left; }
.partagebox img{ margin:0 auto 6px; display:block; }
.partagebox h1{ text-align:center; }
.partagebox .sub{ text-align:center; }
.partagebox .p-titre{ font-size:20px; font-weight:400; color:var(--indigo); margin:18px 0 14px; line-height:1.35; }
.partagebox .p-texte{ font-size:15px; line-height:1.6; color:var(--ink); margin:0 0 12px; }
.partagebox .fichier{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:var(--radius-s); margin:0 0 18px; }
.partagebox .ftxt{ min-width:0; }
.partagebox .fnom{ font-size:16px; color:var(--ink); word-break:break-word; }
.partagebox .ftaille{ font-size:14px; color:var(--muted); margin-top:2px; }
.partagebox .msg-titre{ font-size:13px; color:var(--muted); margin:0 0 6px; }
.partagebox .msg-emetteur{
  background:var(--rose-l); border-left:3px solid var(--rose);
  padding:12px 14px; margin:0 0 20px; font-style:italic; font-size:15px;
  line-height:1.6; white-space:pre-wrap; word-break:break-word;
}
.partagebox .btn.large{ display:block; width:100%; text-align:center; padding:14px 0; font-size:16px; text-decoration:none; }
.partagebox .btn.occupe{ opacity:.6; pointer-events:none; }
.partagebox .echeance{ font-size:14px; color:var(--muted); margin:12px 0 0; text-align:center; }
.partagebox .legal{ margin-top:18px; }

/* Cadre d'apercu : le navigateur y met sa propre visionneuse. */
.ed-apercu{ background:var(--bg); }

/* etats vides */
.empty{ padding:80px 20px; text-align:center; color:var(--muted); }
.empty .t{ font-size:20px; color:var(--ink); margin:16px 0 6px; }
.empty svg{ color:var(--mauve); }

/* ------------------------------------------------------------ menu contextuel */
.ctx{
  position:fixed; z-index:80; min-width:224px; padding:8px 0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-s); box-shadow:var(--shadow-l); display:none;
}
.ctx.open{ display:block; }
.ctx button{
  display:flex; align-items:center; gap:14px; width:100%; padding:9px 18px;
  font-size:15px; text-align:left; color:var(--ink);
}
.ctx button:hover{ background:var(--hover); }
.ctx button.danger{ color:var(--pdf); }
.ctx button svg{ flex:none; color:var(--muted); }
.ctx button.danger svg{ color:var(--pdf); }
.ctx .sep{ height:1px; background:var(--line); margin:6px 0; }

/* ------------------------------------------------------------------- fenetres */
.veil{ position:fixed; inset:0; background:rgba(31,27,60,.42); z-index:90; display:none; align-items:center; justify-content:center; padding:20px; }
.veil.open{ display:flex; }
.dlg{ width:100%; max-width:440px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-l); overflow:hidden; }
.dlg h3{ margin:0; padding:22px 24px 6px; font-size:22px; font-weight:400; }
.dlg .body{ padding:8px 24px 4px; color:var(--muted); }
.dlg input[type=text]{ width:100%; height:44px; padding:0 14px; margin:12px 0 4px; border:1px solid var(--line); border-radius:var(--radius-s); outline:none; color:var(--ink); }
.dlg input[type=text]:focus{ border-color:var(--indigo); }
.dlg .foot{ display:flex; justify-content:flex-end; gap:8px; padding:16px 20px 20px; }
.btn{ height:40px; padding:0 22px; border-radius:999px; font-size:15px; font-weight:400; }
.btn.ghost{ color:var(--indigo); }
.btn.ghost:hover{ background:var(--select); }
.btn.primary{ background:var(--indigo); color:#fff; }
.btn.primary:hover{ background:var(--indigo-d); }
.btn.primary:disabled{ background:#b9b8c8; cursor:default; }
.btn.danger{ background:var(--pdf); color:#fff; }

/* --------------------------------------------------------------- depot fichiers */
.drop{
  position:fixed; inset:var(--header-h) 0 0 var(--side-w); z-index:70;
  background:rgba(247,230,240,.94); border:3px dashed var(--mauve);
  border-radius:var(--radius) 0 0 0; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:14px;
  color:var(--indigo); font-size:22px; pointer-events:none;
}
.drop.on{ display:flex; }

/* --------------------------------------------------------------- transferts */
.uploads{
  position:fixed; right:22px; bottom:22px; width:352px; z-index:60;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-l); overflow:hidden; display:none;
}
.uploads.on{ display:block; }
.uploads .hd{ display:flex; align-items:center; gap:10px; padding:13px 16px; background:var(--indigo); color:#fff; font-size:15px; }
.uploads .hd .grow{ flex:1; }
.uploads .hd button{ color:#fff; opacity:.85; padding:2px; }
.uploads .hd button:hover{ opacity:1; }
.uploads .items{ max-height:280px; overflow:auto; }
.uploads .it{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line-soft); }
.uploads .it .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.uploads .it .st{ font-size:13px; color:var(--muted); flex:none; }
.uploads .it .st.ok{ color:var(--sheet); }
.uploads .it .st.ko{ color:var(--pdf); }
.uploads .pg{ height:3px; background:var(--line-soft); }
.uploads .pg i{ display:block; height:100%; background:var(--teal); width:0; transition:width .2s; }

/* ------------------------------------------------------------------- messages */
.toasts{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background:var(--indigo-d); color:#fff; padding:13px 22px; border-radius:var(--radius-s);
  box-shadow:var(--shadow-l); font-size:15px; max-width:520px;
  animation:pop .2s ease-out;
}
.toast.err{ background:var(--pdf); }
@keyframes pop{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ------------------------------------------------------------------ connexion */
.loginpage{
  min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(900px 500px at 12% -10%, var(--rose-l), transparent 60%),
    radial-gradient(800px 500px at 88% 110%, #e8f2f3, transparent 60%),
    var(--bg);
}
.loginbox{ width:100%; max-width:404px; background:var(--surface); border-radius:18px; box-shadow:var(--shadow-l); padding:38px 36px 30px; }
.loginbox img{ height:44px; display:block; margin:0 auto 22px; }
.loginbox h1{ margin:0 0 4px; font-size:26px; font-weight:400; text-align:center; }
.loginbox h1 b{ font-weight:700; }
.loginbox p.sub{ margin:0 0 26px; text-align:center; color:var(--muted); font-size:15px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:14px; color:var(--muted); margin-bottom:6px; }
.field input{ width:100%; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:var(--radius-s); outline:none; }
.field input:focus{ border-color:var(--indigo); box-shadow:0 0 0 3px var(--rose-l); }
/* Un textarea n'herite ni de la largeur ni de la police du formulaire :
   sans regle propre, il reste etroit, en chasse fixe, et redimensionnable
   dans les deux sens — il peut alors deborder de la fenetre. */
.field textarea{
  width:100%; min-height:110px; padding:11px 14px; border:1px solid var(--line);
  border-radius:var(--radius-s); outline:none; resize:vertical;
  font-family:inherit; font-size:15px; line-height:1.55; color:var(--ink);
}
.field textarea:focus{ border-color:var(--indigo); box-shadow:0 0 0 3px var(--rose-l); }
/* La fenetre de partage porte deux champs et un resultat : elle a besoin
   d'un peu plus de large que la fiche de compte. */
.dlg.large{ max-width:600px; }
.loginbox .btn{ width:100%; height:46px; margin-top:10px; }
.msg{ display:none; margin-top:14px; padding:11px 14px; border-radius:var(--radius-s); background:#fdeaea; color:var(--pdf); font-size:14px; }
.msg.on{ display:block; }
.legal{ margin-top:24px; text-align:center; font-size:13px; color:var(--muted); line-height:1.5; }
.legal a,.oubli a{ color:var(--indigo); }
.oubli{ margin:14px 0 0; text-align:center; font-size:14px; }

/* --------------------------------------------------------------------- ecrans */
/* Le bouton de menu et le « + » n'existent QUE sur petit ecran : sur un
   grand, le menu de gauche est deja la et un bouton de plus serait du bruit. */
.burger,.plusmob,.marque-tiroir{ display:none; }
.voile-menu{
  position:fixed; inset:0; z-index:19; background:rgba(37,37,80,.32);
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.voile-menu.on{ opacity:1; pointer-events:auto; }

@media (max-width:900px){
  :root{ --side-w:0px; }
  .brand{ width:auto; }
  .brand .name{ display:none; }
  .burger,.plusmob{ display:flex; }
  /* La marque quitte l'en-tete : a 390 px, le logo, la recherche, deux
     boutons et l'avatar ne tiennent pas ensemble, et c'est la recherche qui
     y perdait — elle affichait « Rec ». Elle passe en tete du tiroir, ou
     elle identifie tout aussi bien l'application. */
  .brand{ display:none; }
  .search{ max-width:none; }
  /* Le ressort de l'en-tete disputait sa largeur a la recherche, qui
     n'affichait plus que sa loupe. Sur petit ecran, c'est la recherche
     qui doit prendre toute la place disponible. */
  .header .spacer{ display:none; }
  .header{ gap:8px; padding:0 10px; }
  .marque-tiroir{ display:flex; align-items:center; padding:2px 6px 14px; }
  .marque-tiroir img{ height:30px; width:auto; display:block; }
  .main{ border-radius:0; border-left:none; }
  .drop{ left:0; }

  /* Le menu devient un TIROIR. Il ne disparait plus : il se range. */
  .side{
    width:272px; padding:14px 12px 20px;
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:none; overflow-y:auto;
  }
  .side.ouvert{ transform:translateX(0); box-shadow:var(--shadow-l); }
  /* Le doigt est moins precis que la souris : 48 px est le minimum tenable. */
  .navitem{ height:48px; font-size:16px; }
  .newbtn{ height:50px; }

  /* Deux colonnes suffisent : le nom, et ce qu'on cherche vraiment a savoir. */
  .cols,.row{ grid-template-columns:1fr 92px 40px; padding:0 14px; }
  .cols{ padding:8px 14px; }
  .cols span:nth-child(2),.row .meta:nth-child(2){ display:none; }
  .cols span:nth-child(3),.row .meta:nth-child(3){ display:none; }
  .row{ height:58px; }
  .toolbar{ padding:12px 14px 8px; }
  .crumbs button{ font-size:19px; padding:5px 8px; }
  .selbar{ padding:0 14px; gap:4px; }
  .selbar .count{ display:none; }
  .selbar button.act{ padding:0 10px; font-size:14px; }
  .list.grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); padding:14px; }

  /* Une fenetre modale sur telephone occupe l'ecran : une carte centree de
     560 px y deborde ou s'y perd. */
  .dlg,.dlg.large{ max-width:100%; width:calc(100vw - 24px); }
  .ctx{ min-width:min(280px, calc(100vw - 32px)); }

  /* Les ecrans d'administration retombent sur l'essentiel. */
  .cols.comptes,.row.comptes{ grid-template-columns:1fr 96px 60px; }
  .cols.comptes .opt1,.row.comptes .opt1,
  .cols.comptes .opt2,.row.comptes .opt2,
  .cols.comptes .mail,.row.comptes .mail{ display:none; }
  .cols.groupes,.row.groupes{ grid-template-columns:1fr 80px 88px; }
  .cols.groupes .desc,.row.groupes .desc,
  .cols.groupes span:nth-child(4),.row.groupes .cell:nth-child(4){ display:none; }
}

/* ------------------------------------------------------------ journal d'audit */
.filtres{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  padding:12px 22px 14px; border-bottom:1px solid var(--line);
  background:var(--hover); flex:none;
}
.filtres label{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.filtres label.grow{ flex:1; min-width:180px; }
.filtres input,.filtres select{
  height:34px; padding:0 10px; border:1px solid var(--line);
  border-radius:var(--radius-s); background:var(--surface); outline:none; color:var(--ink);
}
.filtres input:focus,.filtres select:focus{ border-color:var(--indigo); }
.filtres .btn{ height:34px; }

/* Largeurs SOUPLES et non fixes : quatre colonnes en pixels totalisaient plus
   que le conteneur, la derniere se reduisait a 23 px et le texte s'y empilait
   caractere par caractere sur 200 px de haut. */
.cols.audit,.row.audit{
  grid-template-columns:148px minmax(104px,1fr) minmax(150px,1.1fr) minmax(104px,1.5fr) 116px;
}
.row.audit{ height:46px; align-items:center; }
/* min-width:0 est indispensable : un enfant de grille vaut min-width:auto par
   defaut et refuse de retrecir sous son contenu, ce qui annule l'ellipse. */
.cols.audit span,.row.audit .cell{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row.audit .cell{ font-size:14px; }
.row.audit .quand{ color:var(--muted); font-variant-numeric:tabular-nums; }
.row.audit .quoi{ display:flex; align-items:center; gap:8px; }
.row.audit .quoi span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.row.audit .cible{ color:var(--muted); }
.row.audit .ip{ color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; }

/* Pastille de famille : la couleur porte l'information, pas la decoration.
   Une lecture n'est pas une ecriture, et un refus doit sauter aux yeux. */
.fam{ display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; }
.fam.auth{ background:var(--mauve); }
.fam.lecture{ background:var(--teal); }
.fam.ecriture{ background:var(--doc); }
.fam.refus{ background:var(--pdf); }
.fam.autre{ background:#9a9aa5; }
/* Les actes sur les droits meritent leur propre couleur : c'est la
   famille qu'on relit en premier apres un incident. */
.fam.droits{ background:var(--indigo); }

.pagination{ display:flex; align-items:center; justify-content:center; gap:14px; padding:18px; color:var(--muted); font-size:14px; }
.pagination button{ height:32px; padding:0 14px; border-radius:999px; color:var(--indigo); }
.pagination button:hover:not(:disabled){ background:var(--select); }
.pagination button:disabled{ color:#b9b8c8; cursor:default; }

/* ------------------------------------------------------------------ mon compte */
.dlg.large{ max-width:560px; }
.onglets{ display:flex; gap:4px; padding:0 24px; border-bottom:1px solid var(--line); }
.onglets button{ padding:11px 14px; font-size:15px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.onglets button.on{ color:var(--indigo); border-bottom-color:var(--indigo); font-weight:700; }
.panneau{ display:none; padding:18px 24px 4px; }
.panneau.on{ display:block; }
.panneau label{ display:block; font-size:14px; color:var(--muted); margin:12px 0 5px; }
.panneau input{ width:100%; height:42px; padding:0 13px; border:1px solid var(--line); border-radius:var(--radius-s); outline:none; color:var(--ink); }
.panneau input:focus{ border-color:var(--indigo); }
.panneau .aide{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.5; }
.panneau .fige{ background:var(--bg); color:var(--muted); }
.sess{ border:1px solid var(--line); border-radius:var(--radius-s); padding:11px 13px; margin-bottom:8px; font-size:14px; }
.sess.moi{ border-color:var(--select-line); background:var(--select); }
.sess .l1{ display:flex; justify-content:space-between; gap:10px; }
.sess .l2{ color:var(--muted); font-size:13px; margin-top:3px; word-break:break-all; }
.avis{ display:none; margin:12px 24px 0; padding:11px 14px; border-radius:var(--radius-s); font-size:14px; }
.avis.on{ display:block; }
.avis.ko{ background:#fdeaea; color:var(--pdf); }
.avis.ok{ background:#e6f4ea; color:var(--sheet); }

/* ------------------------------------------------- journal : synthese et mise en page */
.resume{ display:flex; gap:8px; padding:14px 22px 2px; flex-wrap:wrap; flex:none; }
.chip{
  display:flex; align-items:center; gap:9px; height:34px; padding:0 15px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font-size:14px; color:var(--ink); transition:.12s;
}
.chip:hover{ background:var(--hover); }
.chip.on{ background:var(--indigo); color:#fff; border-color:var(--indigo); }
.chip .pt{ width:8px; height:8px; border-radius:50%; flex:none; }
.chip.on .pt{ background:#fff !important; }
.chip b{ font-variant-numeric:tabular-nums; font-weight:700; }

/* Pastille d'action : la couleur porte la famille, le texte porte le sens.
   Un refus doit se reperer sans lire. */
.badge{
  display:inline-flex; align-items:center; padding:3px 11px; border-radius:999px;
  font-size:13px; white-space:nowrap; max-width:100%;
  overflow:hidden; text-overflow:ellipsis;
}
.badge.auth{     background:#efe9f5; color:#5b3f7a; }
.badge.lecture{  background:#e6f2f3; color:#2f6b71; }
.badge.ecriture{ background:#e7eefb; color:#2a5b9e; }
.badge.refus{    background:#fdeaea; color:#b3261e; font-weight:700; }
.badge.autre{    background:var(--line-soft); color:var(--muted); }
/* Huit codes etaient classes en famille « droits » cote serveur sans
   qu'aucune regle n'existe ici : la pastille sortait sans style. */
.badge.droits{   background:var(--select); color:var(--indigo); font-weight:700; }

/* Separateur de jour : le journal se lit par journee, pas par ligne. */
.jour{
  display:flex; align-items:center; gap:14px; padding:20px 22px 9px;
  color:var(--muted); font-size:13px; letter-spacing:.4px; text-transform:uppercase;
}
.jour::after{ content:''; flex:1; height:1px; background:var(--line); }
.jour:first-child{ padding-top:10px; }

.row.audit:hover{ background:var(--hover); }
.row.audit .quand{ font-size:13px; }

/* ---------------------------------------------------------------- comptes */
/* Largeurs minimales tenant dans le conteneur : la somme des minima doit
   rester inferieure a la largeur disponible, sinon la grille deborde et une
   barre de defilement horizontale apparait. */
.cols.comptes,.row.comptes{
  grid-template-columns:minmax(104px,1.2fr) minmax(130px,1.5fr) 148px minmax(90px,1fr) 76px 112px 60px;
}
/* Sous 1180 px la somme des colonnes deborde et le nom se replie caractere
   par caractere. On retire alors les colonnes secondaires plutot que de
   laisser la grille se casser. */
@media (max-width: 1180px){
  .cols.comptes,.row.comptes{
    grid-template-columns:minmax(104px,1.2fr) minmax(130px,1.5fr) 148px minmax(90px,1fr) 76px 60px;
  }
  .cols.comptes .opt1,.row.comptes .opt1{ display:none; }
}
@media (max-width: 980px){
  .cols.comptes,.row.comptes{
    grid-template-columns:minmax(104px,1.2fr) minmax(130px,1.6fr) 148px 76px 60px;
  }
  .cols.comptes .opt2,.row.comptes .opt2{ display:none; }
}

/* ------------------------------------------------ ecran Indexation (admin) */
/* Le tableau de bord de sante. Lisible d'un coup d'oeil et de loin : a
   l'echelle d'un import de plusieurs centaines de milliers de documents, on
   vient y chercher un chiffre, pas une page a lire. */
.ixbloc{
  margin:14px 22px; padding:18px 20px; border:1px solid var(--bord);
  border-radius:var(--radius-m); background:#fff;
}
.ixtitre{ display:flex; align-items:center; gap:12px; }
.ixtitre .h{ font-size:17px; font-weight:650; color:var(--ink); }
.ixtitre2{ font-size:15px; font-weight:650; color:var(--ink); margin-bottom:12px; }
.ixpuce{ padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:#e8f3ec; color:#1f6b3b; }
.ixpuce.encours{ background:#fdf2e2; color:#8a5a12; }
.ixpuce.ko{ background:#fde8ec; color:var(--pdf); }

.ixgrand{ margin-top:14px; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px; }
.ixgrand .n{ font-size:38px; font-weight:700; color:var(--ink); line-height:1.1;
  font-variant-numeric:tabular-nums; }
.ixgrand .sur,.ixgrand .unite{ font-size:15px; color:var(--muted); }
.ixgrand .tot{ font-size:22px; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums; }

.ixbarre{ margin-top:12px; height:10px; border-radius:999px; background:#eef0f4; overflow:hidden; }
.ixplein{ height:100%; border-radius:999px; background:var(--accent, #6b2f4a);
  transition:width .4s ease; }
.ixsous{ margin-top:8px; font-size:13.5px; color:var(--muted); }

.ixcartes{ margin:0 22px; display:flex; flex-wrap:wrap; gap:12px; }
.ixcarte{
  flex:1 1 150px; min-width:140px; padding:14px 16px; background:#fff;
  border:1px solid var(--bord); border-radius:var(--radius-m);
}
.ixcarte .n{ font-size:22px; font-weight:650; color:var(--ink); line-height:1.2;
  font-variant-numeric:tabular-nums; }
.ixcarte .l{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.ixcarte.tiede .n{ color:#8a5a12; }
.ixcarte.chaud .n{ color:var(--pdf); }

.ixdeux{ display:flex; flex-wrap:wrap; gap:22px; }
.ixdisque{ flex:1 1 260px; min-width:240px; }
.ixdisque .l{ font-size:13px; color:var(--muted); margin-bottom:6px; }
.jauge{ min-width:0; }
.jbarre{ height:8px; border-radius:999px; background:#eef0f4; overflow:hidden; }
.jplein{ height:100%; border-radius:999px; background:#2f7a4d; }
.jplein.alerte{ background:#c98a1a; }
.jplein.danger{ background:var(--pdf); }
.jtexte{ margin-top:5px; font-size:12.5px; color:var(--muted); }

.ixtable{ display:flex; flex-direction:column; gap:2px; }
.ixligne{ display:grid; grid-template-columns:1fr 90px 160px; gap:12px;
  padding:7px 0; border-top:1px solid var(--bord); font-size:14px; }
.ixligne:first-child{ border-top:0; }
.ixligne .q{ color:var(--ink); }
.ixligne .v{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.ixligne .c{ text-align:right; color:var(--muted); font-size:13px;
  font-variant-numeric:tabular-nums; }
.ixnote{ margin:0 22px 20px; font-size:13px; color:var(--muted); }

@media (max-width:720px){
  .ixbloc{ margin:12px 14px; padding:14px; }
  .ixcartes{ margin:0 14px; }
  .ixcarte{ flex:1 1 120px; min-width:118px; padding:12px; }
  .ixgrand .n{ font-size:30px; }
  .ixligne{ grid-template-columns:1fr 70px; }
  .ixligne .c{ display:none; }
  .ixnote{ margin:0 14px 16px; }
}

/* ------------------------------------------- etat de l'indexation (admin) */
.indexbloc{
  margin:14px 22px 6px; padding:14px 16px; border:1px solid var(--bord);
  border-radius:var(--radius-m); background:#fbfbfc;
}
.indexbloc .ititre{ display:flex; align-items:center; gap:10px; font-weight:650; font-size:15px; color:var(--ink); }
.indexbloc .ipuce{
  padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600;
  background:#e8f3ec; color:#1f6b3b;
}
.indexbloc .ipuce.encours{ background:#fdf2e2; color:#8a5a12; }
.indexbloc .ipuce.ko{ background:#fde8ec; color:var(--pdf); }
.indexbloc .ichiffres{ display:flex; flex-wrap:wrap; gap:26px; margin-top:12px; }
.indexbloc .ic .n{ font-size:20px; font-weight:650; color:var(--ink); line-height:1.2; }
.indexbloc .ic .l{ font-size:12.5px; color:var(--muted); }
.indexbloc .sec{ margin-top:10px; font-size:13px; color:var(--muted); }
@media (max-width:720px){
  .indexbloc{ margin:12px 14px 4px; }
  .indexbloc .ichiffres{ gap:18px; }
}

/* ------------------------------------------------- extrait de recherche */
/* Le passage trouve dans le document, sous son nom. On laisse la ligne
   s'agrandir : tronquer l'extrait a une ligne le rendrait illisible, et c'est
   precisement ce qu'on est venu lire. */
.row.avec-extrait{ height:auto; min-height:52px; padding-top:6px; padding-bottom:10px; align-items:center; }
.extrait{
  grid-column:1 / -1;          /* toute la largeur, sous les colonnes */
  margin:2px 0 0 34px;         /* aligne sur le texte du nom, pas sur l icone */
  font-size:13.5px; line-height:1.5; color:var(--muted); min-width:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.list.grid .extrait{ display:none; }   /* en vignettes, il n y a pas la place */
.extrait .ou{
  display:inline-block; margin-right:6px; padding:1px 7px; border-radius:999px;
  background:#eef0f4; color:#5b6067; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; vertical-align:1px;
}
@media (max-width:720px){
  .row.avec-extrait .extrait{ -webkit-line-clamp:3; font-size:13px; }
}

/* --------------------------------------------------------------- partages */
.cols.partages,.row.partages{
  grid-template-columns:minmax(150px,1.6fr) minmax(140px,1.3fr) 180px 120px 150px;
}
.row.partages{ height:58px; align-items:center; }
.cols.partages span,.row.partages .cell{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row.partages .cell{ font-size:14px; }
.row.partages .pnom{ font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.row.partages .actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.row.partages .retirer{ color:var(--muted); font-size:14px; padding:6px 12px; border-radius:var(--radius-s); }
.row.partages .retirer:hover{ background:#fde8ec; color:var(--pdf); }
@media (max-width:980px){
  .cols.partages,.row.partages{ grid-template-columns:minmax(120px,1.4fr) 110px 120px; }
  .cols.partages span:nth-child(2),.row.partages .cell:nth-child(2),
  .cols.partages span:nth-child(4),.row.partages .cell:nth-child(4){ display:none; }
}

/* Pastille de menu : un compteur qui doit sauter aux yeux. */
.pastille{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--pdf); color:#fff; font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---------------------------------------------------------------- groupes */
.cols.groupes,.row.groupes{
  grid-template-columns:minmax(120px,1.2fr) minmax(160px,2fr) 92px 84px 92px;
}
.row.groupes{ height:56px; align-items:center; cursor:default; }
.cols.groupes span,.row.groupes .cell{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row.groupes .cell{ font-size:14px; }
.row.groupes .nom{ font-size:15px; font-weight:700; color:var(--ink); }
.row.groupes .desc{ color:var(--muted); }
.row.groupes .actions{ display:flex; gap:4px; justify-content:flex-end; }
.row.groupes .actions button{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:var(--muted);
}
.row.groupes .actions button:hover{ background:var(--hover); color:var(--ink); }
.row.groupes .actions button.danger:hover{ background:#fde8ec; color:var(--pdf); }
@media (max-width: 980px){
  .cols.groupes,.row.groupes{ grid-template-columns:minmax(120px,1.4fr) 92px 84px 92px; }
  .cols.groupes .desc,.row.groupes .desc{ display:none; }
}

/* La ligne entiere s'ouvre : le curseur doit le dire avant le clic. */
.row.groupes.ouvrable{ cursor:pointer; }
.titre-section{
  margin:22px 0 8px; font-size:13px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted);
}
.ligne-action{ display:flex; justify-content:flex-end; margin:2px 0 4px; }

/* Compteur : un nombre de membres, pose a plat. */
.compteur{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px;
  border-radius:999px; background:var(--select); color:var(--indigo); font-size:13px; font-weight:700;
}
.compteur.vide{ background:var(--line-soft); color:var(--muted); font-weight:400; }

/* Bandeau d'action en tete d'ecran d'administration. */
.entete-admin{
  display:flex; align-items:center; gap:14px; padding:12px 22px;
  border-bottom:1px solid var(--line); flex:none;
}
.entete-admin .txt{ color:var(--muted); font-size:14px; flex:1; }

/* Acces d'un dossier. */
.aide{ font-size:14px; line-height:1.6; color:var(--muted); margin:0 0 16px; }
.droits{ max-height:260px; overflow:auto; margin:0 0 6px; }
.droit{
  display:flex; align-items:center; gap:10px; padding:9px 2px;
  border-bottom:1px solid var(--line-soft);
}
.droit:last-child{ border-bottom:0; }
.droit .qui{ flex:1; min-width:0; }
.droit .qui b{ display:block; font-size:15px; font-weight:400; color:var(--ink); }
.droit .qui span{ font-size:13px; color:var(--muted); }
.droit select{
  height:34px; padding:0 8px; border:1px solid var(--line);
  border-radius:var(--radius-s); background:var(--surface); outline:none;
}
.droit select:focus{ border-color:var(--indigo); }
.droit .retirer{ color:var(--muted); font-size:14px; padding:6px 10px; border-radius:var(--radius-s); }
.droit .retirer:hover{ background:#fde8ec; color:var(--pdf); }
/* Un droit herite se lit, il ne se modifie pas ici. */
.droit.herite{ opacity:.72; }
.droit .droit-herite{ font-size:13px; text-align:right; }
.ajout-droit{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ajout-droit select{
  height:36px; padding:0 10px; border:1px solid var(--line);
  border-radius:var(--radius-s); background:var(--surface); outline:none; min-width:0; flex:1;
}
.ajout-droit select.niveau{ flex:none; }
.droit select.portee{ font-size:13px; color:var(--muted); }
.case-portee{ display:flex; align-items:center; gap:8px; width:100%; font-size:14px; color:var(--muted); margin-top:2px; cursor:pointer; }
.case-portee input{ width:16px; height:16px; accent-color:var(--indigo); }

/* Ce qu'un groupe ouvre : un miroir, pas un point de reglage. */
.acces-groupe{ margin:0 0 6px; }
.acces-l{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--line-soft); }
.acces-l:last-child{ border-bottom:0; }
.acces-l .qui{ flex:1; min-width:0; }
.acces-l .qui b{ display:block; font-size:15px; font-weight:400; color:var(--ink); }
.acces-l .qui span{ font-size:13px; color:var(--muted); }
.acces-l button{ color:var(--indigo); font-size:14px; padding:6px 10px; border-radius:var(--radius-s); }
.acces-l button:hover{ background:var(--select); }

/* Resultat d'un partage : le lien n'est montre qu'une fois. */
.resultat-partage{ margin-top:6px; }
.resultat-partage .ok{ color:var(--sheet); font-size:15px; margin-bottom:4px; }
.resultat-partage .ko{ color:var(--pdf); font-size:15px; margin-bottom:4px; }
.lien-partage{ display:flex; gap:8px; margin-top:10px; }
.lien-partage input{
  flex:1; min-width:0; height:36px; padding:0 10px; border:1px solid var(--line);
  border-radius:var(--radius-s); font-size:13px; font-family:ui-monospace,Menlo,Consolas,monospace;
}

/* Liste des membres dans la fenetre. */
.membres{ max-height:280px; overflow:auto; margin:2px 0 10px; }
.membre{
  display:flex; align-items:center; gap:10px; padding:8px 2px;
  border-bottom:1px solid var(--line-soft);
}
.membre:last-child{ border-bottom:0; }
.membre .qui{ flex:1; min-width:0; }
.membre .qui b{ display:block; font-size:15px; font-weight:400; color:var(--ink); }
.membre .qui span{ font-size:13px; color:var(--muted); }
.membre button{ color:var(--muted); font-size:14px; padding:5px 10px; border-radius:var(--radius-s); }
.membre button:hover{ background:#fde8ec; color:var(--pdf); }
.ajout-membre{ display:flex; gap:8px; align-items:center; }
.ajout-membre select{
  flex:1; height:36px; padding:0 10px; border:1px solid var(--line);
  border-radius:var(--radius-s); background:var(--surface); outline:none; min-width:0;
}
.ajout-membre select:focus{ border-color:var(--indigo); }
.row.comptes{ height:56px; align-items:center; }
.cols.comptes span,.row.comptes .cell{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row.comptes .cell{ font-size:14px; }
.row.comptes .nom{ font-size:15px; }
.row.comptes .mail{ color:var(--muted); }
.row.comptes .sec{ color:var(--muted); }
.row.comptes select{
  height:32px; padding:0 8px; border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--surface); outline:none; width:100%;
}
.row.comptes select:focus{ border-color:var(--indigo); }
.row.comptes.inactif{ opacity:.55; }

/* Interrupteur d'activation : plus lisible qu'une case a cocher pour un etat
   qui coupe l'acces a quelqu'un. */
.bascule{ position:relative; width:42px; height:24px; border-radius:999px; background:#cfcedb; transition:.15s; flex:none; }
.bascule::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.15s; }
.bascule.on{ background:var(--sheet); }
.bascule.on::after{ transform:translateX(18px); }

.pastille-role{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:13px; }
.pastille-role.lecteur{ background:#e6f2f3; color:#2f6b71; }
.pastille-role.contributeur{ background:#e7eefb; color:#2a5b9e; }
.pastille-role.administrateur{ background:var(--select); color:var(--indigo); font-weight:700; }

/* ----------------------------------------------------------------- editeur */
.editeur{
  position:fixed; inset:0; z-index:120; background:var(--surface);
  display:flex; flex-direction:column;
}
.ed-barre{
  height:52px; flex:none; display:flex; align-items:center; gap:16px;
  padding:0 16px; background:var(--indigo); color:#fff;
}
.ed-retour{
  display:flex; align-items:center; gap:7px; height:36px; padding:0 14px 0 8px;
  border-radius:999px; color:#fff; font-size:15px;
}
.ed-retour:hover{ background:rgba(255,255,255,.14); }
.ed-titre{ font-size:16px; font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ed-etat{ font-size:14px; opacity:.85; flex:none; }
/* Le cadre est ancre en ABSOLU, pas en hauteur relative. Un height:100%
   doit resoudre la hauteur de son parent, et la visionneuse PDF de
   Chrome, dans un conteneur en flex, s'y replie parfois a quelques
   centaines de pixels : on ne voit alors qu'une tranche du document. */
.ed-hote{ flex:1; min-height:0; position:relative; }
.ed-hote iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* ------------------------------------------------------- historique versions */
.vers{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line-soft); }
.vers:last-child{ border-bottom:0; }
.vers .num{ width:34px; height:34px; border-radius:50%; background:var(--bg); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; }
.vers.courante .num{ background:var(--indigo); color:#fff; font-weight:700; }
.vers .det{ flex:1; min-width:0; }
.vers .det .l1{ font-size:15px; }
.vers .det .l2{ font-size:13px; color:var(--muted); margin-top:2px; }
.vers .btn{ height:32px; padding:0 14px; font-size:14px; flex:none; }
.vers .actuelle{ font-size:13px; color:var(--indigo); font-weight:700; flex:none; }

/* ---------------------------------------------------------------------------
   Les points d'entree
   ---------------------------------------------------------------------------
   Ils remplacent le couple « Mon Drive » / « Partage avec moi » : une personne
   a des endroits d'ou partir, pas un dossier a elle et le reste ailleurs.
   L'espace personnel se distingue des autres par un filet, pas par une couleur
   — la couleur est deja prise par la selection. */
#nav-entrees .navitem.perso{ border-left:3px solid var(--mauve); }
#nav-entrees .navvide{
  padding:10px 12px; margin:2px 0 6px; font-size:13px; line-height:1.45;
  color:var(--muted); background:var(--hover); border-radius:var(--radius-s);
}