:root{
  --ink:#1e2240; --ink2:#5a6085; --ink3:#8a90b0;
  --acc:#5b5ff0; --acc2:#06b6d4; --ok:#16a34a; --bad:#dc2626;
  --verre:rgba(255,255,255,.62); --verre-fort:rgba(255,255,255,.86);
  --bord:rgba(255,255,255,.75); --ligne:rgba(60,70,140,.12);
  --ombre:0 8px 30px rgba(60,70,160,.12), 0 1px 2px rgba(60,70,160,.08);
  --r:18px;
  --haut:env(safe-area-inset-top,0px); --bas:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#eef0ff;min-height:100vh;-webkit-tap-highlight-color:transparent}
.fond{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(135deg,#eef0ff,#e8f7fb 55%,#f6efff)}
.fond i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.fond i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;background:#a5b4fc}
.fond i:nth-child(2){width:40vw;height:40vw;right:-8vw;top:10vh;background:#67e8f9}
.fond i:nth-child(3){width:36vw;height:36vw;left:30vw;bottom:-16vw;background:#f0abfc}
.chargement{text-align:center;color:var(--ink2);padding:60px 20px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
svg.ic{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- barre du haut ---------- */
.barre{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(10px + var(--haut)) 16px 10px;background:var(--verre-fort);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--ligne)}
.marque{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em;text-decoration:none;color:inherit;border:0;background:none;padding:0}
.marque img{width:34px;height:34px;border-radius:10px;box-shadow:0 4px 12px rgba(91,95,240,.35)}
.recherche{flex:1;max-width:460px;margin-left:10px;position:relative}
.recherche input{width:100%;padding:10px 14px 10px 40px;border-radius:14px;border:1px solid var(--ligne);background:rgba(255,255,255,.8);outline:none}
.recherche input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(91,95,240,.18)}
.recherche .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink3)}
.actions{display:flex;gap:8px;margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:14px;border:1px solid var(--ligne);background:var(--verre-fort);font-weight:600;color:var(--ink);transition:transform .08s,box-shadow .15s;white-space:nowrap;text-decoration:none}
.btn:hover{box-shadow:var(--ombre)}
.btn:active{transform:scale(.97)}
.btn.prim{background:linear-gradient(135deg,var(--acc),#7c5cf5);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(91,95,240,.35)}
.btn.danger{color:var(--bad)}
.btn.rond{padding:10px;width:42px;height:42px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- contenu ---------- */
main{max-width:1180px;margin:0 auto;padding:18px 16px calc(90px + var(--bas))}
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:4px 0 18px;font-size:15px}
.fil button{border:0;background:none;padding:6px 10px;border-radius:10px;color:var(--ink2);font-weight:600}
.fil button:hover{background:rgba(255,255,255,.7)}
.fil button.ici{color:var(--ink);cursor:default;background:none;font-size:22px;font-weight:800;letter-spacing:-.02em;padding:2px 6px}
.fil .sep{color:var(--ink3)}
.fil button.cible,.carte.cible{outline:3px dashed var(--acc);outline-offset:2px;background:rgba(91,95,240,.1)}
h2.titre{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin:22px 4px 10px;font-weight:700}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.carte{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--verre);border:1px solid var(--bord);box-shadow:var(--ombre);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden;transition:transform .15s,box-shadow .2s;text-align:left;padding:0;color:inherit}
.carte:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(60,70,160,.18)}
.carte.glisse{opacity:.45}
.carte .corps{display:flex;flex-direction:column;flex:1;border:0;background:none;padding:0;text-align:left;color:inherit}
.dossier .corps{flex-direction:row;align-items:center;gap:14px;padding:16px;min-width:0}
.dossier.avec-menu .corps{padding-right:56px}
.pastille{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none;background:linear-gradient(135deg,#f59e0b,#fb7185);box-shadow:0 6px 14px rgba(245,158,11,.35)}
.pastille .ic{width:24px;height:24px}
.nom{font-weight:650;overflow-wrap:anywhere;line-height:1.25}
.meta{font-size:13px;color:var(--ink2);margin-top:2px}
.vignette{aspect-ratio:4/3;width:100%;display:grid;place-items:center;background:rgba(255,255,255,.55);overflow:hidden}
.vignette img{width:100%;height:100%;object-fit:cover;display:block}
.vignette.pdf{background:linear-gradient(135deg,#fee2e2,#ffedd5);color:#dc2626}
.vignette.pdf .ic{width:46px;height:46px;stroke-width:1.6}
.vignette.pdf b{display:block;font-size:13px;letter-spacing:.12em;margin-top:6px}
.vignette.pdf div{text-align:center}
.carte .pied{padding:11px 14px 13px}
.carte .menu-btn{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:11px;border:1px solid var(--ligne);background:var(--verre-fort);display:grid;place-items:center;opacity:0;transition:opacity .15s}
.dossier .menu-btn{top:50%;transform:translateY(-50%)}
.carte:hover .menu-btn,.carte:focus-within .menu-btn,.menu-btn.ouvert{opacity:1}
@media (hover:none){.carte .menu-btn{opacity:1}}
.popup{position:absolute;right:8px;top:46px;z-index:30;min-width:190px;padding:6px;border-radius:14px;background:#fff;border:1px solid var(--ligne);box-shadow:0 18px 40px rgba(40,50,120,.25)}
.dossier .popup{top:calc(50% + 20px)}
.popup button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;border-radius:10px;text-align:left;font-weight:550}
.popup button:hover{background:#f1f2ff}
.popup .danger{color:var(--bad)}
.vide{text-align:center;color:var(--ink2);padding:60px 20px;border:2px dashed rgba(91,95,240,.35);border-radius:var(--r);background:rgba(255,255,255,.4)}
.vide .ic{width:44px;height:44px;color:var(--acc);stroke-width:1.5}
.vide h3{margin:10px 0 4px;color:var(--ink)}
.etiquette{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;background:rgba(91,95,240,.12);color:var(--acc);font-weight:600;margin-top:4px}

/* dépôt de fichiers */
.depot{position:fixed;inset:0;z-index:60;display:none;place-items:center;background:rgba(91,95,240,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.depot.actif{display:grid}
.depot div{padding:34px 44px;border-radius:26px;background:var(--verre-fort);border:3px dashed var(--acc);font-size:20px;font-weight:700;text-align:center}

/* envois */
.envois{position:fixed;right:16px;bottom:calc(16px + var(--bas));z-index:50;width:min(360px,calc(100vw - 32px));padding:12px;border-radius:18px;background:var(--verre-fort);border:1px solid var(--bord);box-shadow:0 18px 50px rgba(40,50,120,.28);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.envois h4{margin:2px 4px 8px;font-size:14px}
.envoi{padding:6px 4px}
.envoi .l{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.envoi .l span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.envoi .barre-p{height:6px;border-radius:9px;background:rgba(91,95,240,.15);margin-top:5px;overflow:hidden}
.envoi .barre-p i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .15s}
.envoi.ok .barre-p i{background:var(--ok)}
.envoi.ko .barre-p i{background:var(--bad)}
.envoi.ko .l span:last-child{color:var(--bad)}

/* fenêtres */
.voile{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(30,34,64,.38);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.fenetre{width:min(480px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:22px;border-radius:24px;background:rgba(255,255,255,.95);border:1px solid var(--bord);box-shadow:0 30px 80px rgba(30,34,64,.35)}
.fenetre h3{margin:0 0 14px;font-size:20px;letter-spacing:-.01em}
.fenetre p{color:var(--ink2);margin:8px 0}
.fenetre label{display:block;font-size:13px;font-weight:650;color:var(--ink2);margin:12px 0 5px}
.fenetre input[type=text],.fenetre input[type=password]{width:100%;padding:12px 14px;border-radius:13px;border:1px solid var(--ligne);background:#fff;outline:none}
.fenetre input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(91,95,240,.18)}
.fenetre .boutons{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.liste-choix{max-height:46vh;overflow:auto;border:1px solid var(--ligne);border-radius:14px;padding:6px;background:#fff}
.liste-choix button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:0;background:none;border-radius:10px;text-align:left}
.liste-choix button:hover:not([disabled]){background:#f1f2ff}
.liste-choix button.choisi{background:rgba(91,95,240,.14);font-weight:700}
.liste-choix button[disabled]{opacity:.4}
.corb{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--ligne)}
.corb:last-child{border:0}
.corb .t{flex:1;min-width:0}
.lien-zone{display:flex;gap:8px}
.lien-zone input{flex:1;min-width:0;font-size:13px}
.msg-err{color:var(--bad);font-size:14px;margin-top:8px;min-height:1em}

/* connexion */
.connexion{min-height:100vh;display:grid;place-items:center;padding:20px}
.connexion form{width:min(400px,100%);padding:34px 28px;border-radius:28px;background:var(--verre-fort);border:1px solid var(--bord);box-shadow:var(--ombre);text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.connexion img{width:64px;height:64px;border-radius:18px;box-shadow:0 10px 26px rgba(91,95,240,.4)}
.connexion h1{margin:14px 0 4px;font-size:26px;letter-spacing:-.02em}
.connexion p{color:var(--ink2);margin:0 0 18px;font-size:15px}
.connexion input{width:100%;padding:14px;border-radius:14px;border:1px solid var(--ligne);margin-bottom:12px;outline:none;text-align:center;font-size:17px}
.connexion input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(91,95,240,.18)}
.connexion .btn{width:100%;padding:14px}
.connexion .refus{background:#fef2f2;color:#991b1b;padding:10px 12px;border-radius:12px;font-size:14px;margin-bottom:14px}
.connexion small{display:block;margin-top:16px;color:var(--ink3)}

/* visionneuse */
.visio{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:rgba(18,20,40,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.visio-haut{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--haut)) 14px 10px;color:#fff}
.visio-haut .t{flex:1;min-width:0;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visio-haut .btn{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.2)}
.visio-haut .btn.prim{background:linear-gradient(135deg,var(--acc),#7c5cf5)}
.visio-corps{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:0 12px calc(12px + var(--bas))}
.visio-corps img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff}
.visio-corps iframe{width:100%;height:100%;border:0;border-radius:12px;background:#fff}
.nav-v{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.22);color:#fff;display:grid;place-items:center}
.nav-v:hover{background:rgba(255,255,255,.35)}
.nav-v.g{left:18px}.nav-v.d{right:18px}

/* message flottant */
.toast{position:fixed;left:50%;bottom:calc(24px + var(--bas));transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;background:#1e2240;color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.35);max-width:calc(100vw - 32px)}
.toast.err{background:#991b1b}
.toast button{border:0;background:none;color:#a5b4fc;font-weight:700;padding:2px 4px}

@media (max-width:700px){
  .barre{flex-wrap:wrap;gap:8px}
  .marque span{display:none}
  .recherche{order:3;flex-basis:100%;max-width:none;margin:0}
  .actions{margin-left:auto}
  .btn .txt{display:none}
  .btn.prim .txt{display:inline}
  .grille{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .grille.dossiers{grid-template-columns:1fr}
  .visio-haut .btn.prim .txt{display:inline}
  .fil button.ici{font-size:19px}
  .nav-v{width:40px;height:40px}.nav-v.g{left:6px}.nav-v.d{right:6px}
  .visio-haut .btn .txt{display:none}
  .depot{display:none!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}