/* ========================================================================
   RESET & BASE
   ======================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:#070d2a}
body{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0c1445,#1a2a6c 30%,#2d4a7a 50%,#1e3a5f 70%,#0f2042)}

/* ========================================================================
   APP CONTAINER — Largeur max et centrage
   ======================================================================== */
#app{width:100%;height:100%;max-width:1880px;padding:14px;margin:0 auto;display:flex;flex-direction:column}

/* ========================================================================
   TOPBAR — Logo + infos utilisateur
   ======================================================================== */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 6px 18px;flex-shrink:0}
.logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:22px;font-weight:600;letter-spacing:1px}
.logo em{color:#e1d30f;font-style:normal}
.user-info{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.5);font-size:18px}
.hid{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:6px;padding:3px 8px;font-family:monospace;color:#e1d30f;font-size:14px}
.dot-ok{width:8px;height:8px;border-radius:50%;background:#5dcaa5;display:inline-block}

/* ========================================================================
   LANG SWITCHER — Drapeaux FR/EN
   ======================================================================== */
.lang-switcher{display:flex;gap:4px;margin-left:10px}
.lang-btn{padding:2px 8px;border-radius:4px;cursor:pointer;opacity:0.35;transition:opacity .2s;border:1px solid rgba(255,255,255,0.1);font-size:12px;font-weight:600;color:rgba(255,255,255,0.6);line-height:1.4}
.lang-btn:hover{opacity:0.7}
.lang-btn.active{opacity:1;border-color:rgba(225,211,15,0.4);color:#e1d30f}

/* ========================================================================
   GRILLE PRINCIPALE — 3 colonnes (1fr 2fr 1fr = 25/50/25)
   ======================================================================== */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:12px;flex:1;min-height:0}
.col{display:flex;flex-direction:column;gap:10px;min-height:0}

/* ========================================================================
   PANNEAUX GLASS — Conteneurs transparents avec blur
   f1 = flex:1 (petit), f2 = flex:2 (moyen), f3 = flex:3 (grand)
   ======================================================================== */
.panel{background:rgba(255,255,255,0.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.09);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.panel.f1{flex:1}
.panel.f2{flex:2}
.panel.f3{flex:3}

/* ========================================================================
   PANEL HEADER — Titre + badge de chaque panneau
   ======================================================================== */
.ph{padding:10px 12px 8px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;gap:6px;flex-shrink:0}
.ph h3{color:#fff;font-size:18px;font-weight:600;flex:1}
.ph .badge{background:rgba(225,211,15,0.15);color:#e1d30f;font-size:18px;padding:2px 6px;border-radius:5px;font-weight:600}

/* ========================================================================
   PANEL SCROLL — Zone scrollable de chaque panneau
   ======================================================================== */
.ps{flex:1;overflow-y:auto;padding:8px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent}
.ps::-webkit-scrollbar{width:3px}
.ps::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}

/* ========================================================================
   TOTP — Cartes de codes TOTP
   ======================================================================== */
.totp-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;margin-bottom:4px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:background .15s}
.totp-item:hover{background:rgba(255,255,255,0.07)}
.totp-ic{width:26px;height:26px;border-radius:6px;background:rgba(93,202,165,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;color:#5dcaa5;font-weight:700}
.totp-name{color:rgba(255,255,255,0.6);font-size:16px}
.totp-code{color:#fff;font-size:18px;font-weight:700;font-family:monospace;letter-spacing:2px}

/* ========================================================================
   TOTP TIMER — Cercle de progression
   ======================================================================== */
.totp-timer{width:28px;height:28px;position:relative;flex-shrink:0}
.totp-timer svg{width:28px;height:28px;transform:rotate(-90deg)}
.totp-timer .bg{stroke:rgba(255,255,255,0.06);fill:none;stroke-width:2}
.totp-timer .fg{fill:none;stroke-width:2;stroke-linecap:round}
.totp-timer span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(255,255,255,0.4)}

/* ========================================================================
   VAULT — Cartes de fichiers du coffre-fort (mode liste)
   ======================================================================== */
.file-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;margin-bottom:4px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:background .15s}
.file-item:hover{background:rgba(255,255,255,0.07)}

/* ========================================================================
   VAULT — Mode grille
   ======================================================================== */
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.file-grid-item{display:flex;flex-direction:column;align-items:center;padding:14px 8px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:background .15s;text-align:center}
.file-grid-item:hover{background:rgba(255,255,255,0.07)}
.file-grid-item .fi{width:40px;height:40px;border-radius:10px;margin-bottom:8px;font-size:18px}
.file-grid-item .f-name{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,0.8)}
.file-grid-item .f-meta{font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px}

/* ========================================================================
   VAULT — Icones de type de fichier
   ======================================================================== */
.fi{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.fi.img{background:rgba(93,202,165,0.1);color:#5dcaa5}
.fi.pdf{background:rgba(240,153,123,0.1);color:#f0997b}
.fi.txt{background:rgba(133,183,235,0.1);color:#85b7eb}
.fi.other{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.4)}

/* ========================================================================
   VAULT — Nom, meta et badge categorie
   ======================================================================== */
.f-name{color:rgba(255,255,255,0.8);font-size:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-meta{color:rgba(255,255,255,0.3);font-size:14px;margin-top:1px}
.f-cat{background:rgba(255,255,255,0.05);border-radius:4px;padding:1px 6px;font-size:12px;color:rgba(255,255,255,0.35);flex-shrink:0}

/* ========================================================================
   VAULT — Filtre categories (pills)
   ======================================================================== */
.cat-filter{display:flex;gap:4px;padding:6px 10px;flex-shrink:0;flex-wrap:wrap}
.cat-pill{padding:3px 8px;border-radius:10px;font-size:12px;color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);cursor:pointer;white-space:nowrap;transition:all .2s}
.cat-pill:hover{background:rgba(255,255,255,0.06)}
.cat-pill.active{background:rgba(225,211,15,0.12);color:#e1d30f;border-color:rgba(225,211,15,0.25)}

/* ========================================================================
   VAULT — Toggle liste/grille
   ======================================================================== */
.view-toggle{display:flex;gap:4px}
.view-toggle span{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);transition:all .2s}
.view-toggle span:hover{background:rgba(255,255,255,0.08)}
.view-toggle span.active{background:rgba(225,211,15,0.15);border-color:rgba(225,211,15,0.3)}
.view-toggle svg{width:18px;height:18px}

/* ========================================================================
   VAULT — Bouton ajouter et actions fichiers
   ======================================================================== */
.vault-add-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;background:rgba(225,211,15,0.12);border:1px solid rgba(225,211,15,0.25);color:#e1d30f;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s;flex-shrink:0}
.vault-add-btn:hover{background:rgba(225,211,15,0.25)}
.add-dropdown{display:none;position:absolute;top:100%;right:0;margin-top:6px;background:rgba(20,30,60,0.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;min-width:220px;z-index:50}
.add-dropdown.visible{display:block}
.add-dropdown-item{padding:10px 14px;color:rgba(255,255,255,0.7);font-size:15px;cursor:pointer;transition:background .15s;white-space:nowrap}
.add-dropdown-item:hover{background:rgba(255,255,255,0.08);color:#fff}
.file-actions{display:flex;gap:4px;flex-shrink:0;margin-left:6px}
.file-action{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;border:none;color:rgba(255,255,255,0.3);font-size:14px;transition:all .2s}
.file-action:hover{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7)}
.file-action.del:hover{color:#e24b4a}

/* ========================================================================
   CONTEXT MENU — Menu clic droit personnalisé
   ======================================================================== */
.ctx-menu{position:fixed;z-index:200;background:rgba(20,30,60,0.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;min-width:200px;padding:4px 0;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.ctx-item{padding:9px 14px;color:rgba(255,255,255,0.7);font-size:13px;cursor:pointer;transition:background .12s;display:flex;align-items:center;gap:8px}
.ctx-item:hover{background:rgba(255,255,255,0.08);color:#fff}
.ctx-item.danger{color:rgba(226,75,74,0.7)}
.ctx-item.danger:hover{color:#e24b4a;background:rgba(226,75,74,0.08)}
.ctx-sep{height:1px;background:rgba(255,255,255,0.06);margin:4px 0}
 
/* ========================================================================
   MODAL GLASS — Pop-ups d'actions (upload, suppression, catégorie)
   ======================================================================== */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6)}
.modal-card{background:rgba(20,30,60,0.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:24px;max-width:420px;width:90%}
.modal-card h3{color:#fff;font-size:16px;margin-bottom:16px}
.modal-input{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px 12px;color:#fff;font-size:13px;outline:none;margin-bottom:10px}
.modal-input:focus{border-color:rgba(225,211,15,0.4)}
.modal-input::placeholder{color:rgba(255,255,255,0.25)}
.modal-select{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px 12px;color:#fff;font-size:13px;outline:none;margin-bottom:10px;appearance:none}
.modal-select option{background:#1a2a4c;color:#fff}
.modal-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.modal-btn{padding:8px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .2s}
.modal-btn.cancel{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5)}
.modal-btn.cancel:hover{background:rgba(255,255,255,0.1)}
.modal-btn.primary{background:rgba(225,211,15,0.2);color:#e1d30f;border:1px solid rgba(225,211,15,0.3)}
.modal-btn.primary:hover{background:rgba(225,211,15,0.35)}
.modal-btn.danger{background:rgba(226,75,74,0.15);color:#e24b4a;border:1px solid rgba(226,75,74,0.3)}
.modal-btn.danger:hover{background:rgba(226,75,74,0.3)}
.modal-dropzone{border:2px dashed rgba(255,255,255,0.1);border-radius:12px;padding:30px;text-align:center;color:rgba(255,255,255,0.25);font-size:13px;cursor:pointer;transition:all .2s;margin-bottom:10px}
.modal-dropzone:hover,.modal-dropzone.dragover{border-color:rgba(225,211,15,0.4);color:rgba(255,255,255,0.5);background:rgba(225,211,15,0.03)}
.modal-progress{height:3px;background:rgba(255,255,255,0.06);border-radius:2px;margin-top:10px;overflow:hidden}
.modal-progress-bar{height:100%;background:#e1d30f;border-radius:2px;transition:width .3s;width:0%}

/* ========================================================================
   CLOUD INFO — Statistiques du cloud (quota, fichiers, etc.)
   ======================================================================== */
.cloud-stat{padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.03);margin-bottom:6px}
.cloud-stat .label{color:rgba(255,255,255,0.35);font-size:16px}
.cloud-stat .value{color:#fff;font-size:18px;font-weight:600;margin-top:2px}

/* ========================================================================
   CLOUD INFO — Barre de progression du quota
   ======================================================================== */
.bar-bg{height:3px;background:rgba(255,255,255,0.06);border-radius:2px;margin-top:6px}
.bar-fill{height:3px;border-radius:2px;transition:width .3s}
.plan-badge{display:inline-block;background:rgba(225,211,15,0.1);color:#e1d30f;font-size:12px;padding:2px 8px;border-radius:6px;font-weight:600;margin-top:4px}

/* ========================================================================
   ACTIVITE RECENTE — Journal d'activite
   ======================================================================== */
.activity-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;margin-bottom:3px}
.activity-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.activity-text{color:rgba(255,255,255,0.5);font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-time{color:rgba(255,255,255,0.25);font-size:10px;flex-shrink:0;font-family:monospace}
.activity-month{color:rgba(225,211,15,0.6);font-size:11px;font-weight:700;padding:10px 0 4px;border-bottom:1px solid rgba(255,255,255,0.04);margin-bottom:4px;text-transform:uppercase;letter-spacing:1px}
.activity-full-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.activity-full-icon{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:6px}
.activity-full-text{color:rgba(255,255,255,0.6);font-size:12px;line-height:1.5;flex:1}
.activity-full-date{color:rgba(255,255,255,0.25);font-size:10px;flex-shrink:0;font-family:monospace;white-space:nowrap}
.refresh-btn{color:rgba(93,202,165,0.6);cursor:pointer;font-size:18px;transition:color .2s}
.refresh-btn:hover{color:#5dcaa5}

/* ========================================================================
   SCORE DE SECURITE — Barre circulaire
   ======================================================================== */
.score-container{display:flex;align-items:center;gap:16px;padding:10px}
.score-circle{position:relative;width:56px;height:56px;flex-shrink:0}
.score-circle svg{width:56px;height:56px;transform:rotate(-90deg)}
.score-circle .bg{stroke:rgba(255,255,255,0.06);fill:none;stroke-width:4}
.score-circle .fg{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s}
.score-circle span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.score-details{flex:1;font-size:16px;color:rgba(255,255,255,0.4);line-height:1.8}
.score-check{color:#5dcaa5}
.score-miss{color:rgba(255,255,255,0.2)}

/* ========================================================================
   CONSEILS SECURITE — Carousel
   ======================================================================== */
.tip-card{padding:12px;text-align:center;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#usage-tips .tip-card{min-height:150px}
.tip-icon{font-size:36px;margin-bottom:8px;opacity:0.5}
.tip-text{color:rgba(255,255,255,255.5);font-size:18px;line-height:1.6}
.tip-nav{display:flex;justify-content:center;gap:6px;margin-top:10px}
.tip-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.1);cursor:pointer;transition:background .2s}
.tip-dot.active{background:#e1d30f}

/* ========================================================================
   MONITORING — Lignes de status des serveurs
   ======================================================================== */
.monitor-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;margin-bottom:4px;background:rgba(255,255,255,0.02)}
.monitor-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.monitor-dot.ok{background:#5dcaa5}
.monitor-dot.warn{background:#e1d30f}
.monitor-dot.err{background:#e24b4a}
.monitor-name{color:rgba(255,255,255,0.6);font-size:16px;flex:1}
.monitor-val{color:rgba(255,255,255,0.35);font-size:14px;font-family:monospace}

/* ========================================================================
   BARRE DU BAS — Copyright, securite, liens
   ======================================================================== */
.bbar{margin-top:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:10px;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.bbar .left{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,0.35);font-size:14px}
.bbar .center{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,0.35);font-size:14px}
.bbar .right{display:flex;gap:14px}
.bbar .right a{color:rgba(255,255,255,0.3);font-size:14px;text-decoration:none}

/* ========================================================================
   LOGIN — Ecran de connexion (QR Code)
   ======================================================================== */
#login-screen{display:flex;align-items:center;justify-content:center;flex:1}
.login-card{background:rgba(255,255,255,0.06);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:40px;text-align:center;max-width:400px;width:100%}
.login-card h2{color:#fff;font-size:22px;margin-bottom:8px}
.login-card p{color:rgba(255,255,255,0.5);font-size:14px;margin-bottom:24px;line-height:1.5}
#qr-container{background:#fff;border-radius:12px;padding:16px;display:inline-block;margin-bottom:20px}
#qr-container canvas{display:block}

/* ========================================================================
   LOGIN — Status (spinner, expiration, erreur)
   ======================================================================== */
.login-status{color:rgba(255,255,255,0.4);font-size:12px}
.login-status .spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.1);border-top-color:#e1d30f;border-radius:50%;animation:spin 1s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.login-expired{color:#e24b4a}
.login-expired button{margin-top:12px;background:rgba(225,211,15,0.15);border:1px solid rgba(225,211,15,0.3);color:#e1d30f;padding:8px 20px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:600}

/* ========================================================================
   DASHBOARD — Conteneur principal (masque au login, affiche apres auth)
   ======================================================================== */
#dashboard{display:none;flex:1;flex-direction:column;min-height:0}

/* ========================================================================
   VIEWER IMAGE — Overlay plein ecran pour visualiser les images
   ======================================================================== */
.viewer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:100;display:flex;align-items:center;justify-content:center;cursor:pointer}
.viewer-overlay img{max-width:90%;max-height:90%;object-fit:contain;border-radius:8px}
.viewer-close{position:fixed;top:16px;right:16px;z-index:101;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.viewer-title{position:fixed;top:16px;left:16px;z-index:101;color:rgba(255,255,255,0.7);font-size:14px}

/* ========================================================================
   VIEWER TEXTE — Popup glass pour les fichiers .txt
   ======================================================================== */
.text-viewer{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.7)}
.text-viewer-card{background:rgba(20,30,60,0.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:24px;max-width:600px;width:90%;max-height:70vh;display:flex;flex-direction:column}
.text-viewer-card h3{color:#fff;font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.text-viewer-card pre{color:rgba(255,255,255,0.8);font-size:13px;line-height:1.6;overflow-y:auto;flex:1;white-space:pre-wrap;word-break:break-word}
.text-viewer-card button{align-self:flex-end;margin-top:12px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);color:#fff;padding:6px 16px;border-radius:8px;cursor:pointer;font-size:12px}

/* ========================================================================
   MOBILE BLOCK — Ecran d'information pour smartphones
   ======================================================================== */
#mobile-block{display:none}
@media(pointer:coarse){
  #mobile-block{display:flex!important;position:fixed;inset:0;z-index:9999;flex-direction:column;align-items:center;justify-content:center;padding:40px 30px;text-align:center;background:linear-gradient(135deg,#0c1445,#1a2a6c 30%,#2d4a7a 50%,#1e3a5f 70%,#0f2042)}
  #app{display:none!important}
}
.mb-logo{height:90px;margin-bottom:30px;filter:drop-shadow(0 4px 20px rgba(225,211,15,0.2))}
.mb-title{color:#fff;font-size:24px;font-weight:700;margin-bottom:8px;letter-spacing:0.5px}
.mb-title em{color:#e1d30f;font-style:normal}
.mb-sub{color:rgba(255,255,255,0.5);font-size:14px;line-height:1.7;margin-bottom:36px;max-width:320px}
.mb-btn{display:flex;align-items:center;gap:10px;padding:14px 28px;border-radius:14px;background:rgba(255,255,255,0.08);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);color:#fff;font-size:15px;font-weight:600;text-decoration:none;margin-bottom:12px;transition:background .2s;width:260px;justify-content:center}
.mb-btn:hover{background:rgba(255,255,255,0.14)}
.mb-btn svg{width:22px;height:22px;flex-shrink:0}
.mb-sep{color:rgba(255,255,255,0.15);font-size:11px;margin:20px 0 16px;letter-spacing:2px}
.mb-web{color:rgba(255,255,255,0.3);font-size:12px;line-height:1.6;max-width:280px}