/* =================================================================
   PROJET X - feuille de style unique
   Thèmes : data-theme="dark" (défaut) / "light", persistés en
   localStorage par static/js/app.js.
   ================================================================= */

:root{
  --bg:#0e1015; --bg2:#161a24; --card:#1a1f2b; --line:#2a3140;
  --txt:#e9edf5; --muted:#93a0b8; --accent:#6c8cff; --accent2:#a855f7;
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --shadow:0 10px 34px rgba(0,0,0,.4);
  --radius:14px;
}
html[data-theme="light"]{
  --bg:#f5f7fb; --bg2:#ffffff; --card:#ffffff; --line:#e3e8f0;
  --txt:#121620; --muted:#5b6577; --accent:#3b5bfd; --accent2:#7c3aed;
  --shadow:0 10px 30px rgba(20,30,60,.09);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* L'attribut hidden doit l'emporter : sans ceci, tout élément auquel une
   règle donne un display explicite (nos .btn en inline-flex) reste visible
   malgré hidden — le masquage échouait silencieusement. */
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--txt);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 12px; font-weight:650; letter-spacing:-.2px}
h1{font-size:24px} h2{font-size:19px} h3{font-size:16px}
img{max-width:100%}

/* ---------------- Barre du haut ---------------- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px;
  padding:11px 18px; background:var(--bg2); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px}
.logo{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2));
  font-size:14px; font-weight:800; flex:none;
}
.spacer{flex:1}
.chip{
  padding:5px 11px; border-radius:999px; background:var(--card);
  border:1px solid var(--line); font-size:12.5px; color:var(--muted); white-space:nowrap;
}
.chip.admin{color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); border:0}

/* ---------------- Mise en page ---------------- */
.layout{display:flex; min-height:calc(100vh - 56px)}
.sidebar{
  width:220px; flex:none; padding:16px 12px;
  border-right:1px solid var(--line); background:var(--bg2);
}
.sidebar a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  color:var(--muted); font-weight:500; margin-bottom:3px;
}
.sidebar a:hover{background:var(--card); color:var(--txt); text-decoration:none}
.sidebar a.on{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff}
.sidebar .sep{
  margin:14px 6px 7px; font-size:11px; text-transform:uppercase;
  letter-spacing:1px; color:var(--muted); opacity:.7;
}
.sidebar .count{margin-left:auto; font-size:11.5px; opacity:.75}
.content{flex:1; padding:22px; max-width:1500px; width:100%}

/* ---------------- Cartes / stats ---------------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:17px; margin-bottom:16px; box-shadow:var(--shadow);
}
.grid{display:grid; gap:13px}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px}
.stat .n{
  font-size:25px; font-weight:750; line-height:1.15;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat .l{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px}

/* ---------------- Formulaires ---------------- */
input,select,textarea{
  width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--txt); font-size:14.5px; font-family:inherit;
}
input:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,140,255,.18)}
input[type=checkbox]{width:auto}
label{display:block; font-size:12.5px; color:var(--muted); margin:10px 0 5px; font-weight:600}
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg2); color:var(--txt); cursor:pointer;
  font-size:14px; font-weight:600; font-family:inherit; transition:.15s; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px); border-color:var(--accent); text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border:0}
.btn.danger{border-color:var(--err); color:var(--err)}
.btn.danger:hover{background:var(--err); color:#fff}
.btn.sm{padding:6px 11px; font-size:12.5px}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between}

/* ---------------- Tableaux ---------------- */
.tablewrap{overflow-x:auto; border-radius:12px; border:1px solid var(--line)}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
th{
  text-align:left; padding:10px 12px; background:var(--bg2); color:var(--muted);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; white-space:nowrap;
}
td{padding:9px 12px; border-top:1px solid var(--line); vertical-align:middle}
tr:hover td{background:var(--bg2)}
.mono{font-family:Consolas,'Courier New',monospace; font-size:13px}

/* ---------------- Badges ---------------- */
.badge{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600}
.b-ok{background:rgba(34,197,94,.15); color:var(--ok)}
.b-err{background:rgba(239,68,68,.15); color:var(--err)}
.b-info{background:rgba(108,140,255,.15); color:var(--accent)}
.b-warn{background:rgba(245,158,11,.15); color:var(--warn)}

/* =================================================================
   GALERIE façon photothèque
   ================================================================= */
.gallery{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
}
.tile{
  position:relative; border-radius:12px; overflow:hidden; background:var(--bg2);
  border:1px solid var(--line); aspect-ratio:1/1; cursor:pointer;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent)}
.tile img{width:100%; height:100%; object-fit:cover; display:block; background:var(--bg)}
.tile .ph{
  width:100%; height:100%; display:grid; place-items:center; gap:6px;
  color:var(--muted); text-align:center; padding:10px;
}
.tile .ph .ext{
  font-size:15px; font-weight:800; letter-spacing:.5px; color:var(--txt);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tile .meta{
  position:absolute; left:0; right:0; bottom:0; padding:22px 9px 7px;
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent);
  color:#fff; font-size:11.5px; line-height:1.35; pointer-events:none;
}
.tile .meta .nm{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;
}
.tile .meta .sz{opacity:.8}
.tile .dur{
  position:absolute; right:7px; bottom:7px; padding:2px 7px; border-radius:6px;
  background:rgba(0,0,0,.78); color:#fff; font-size:11.5px; font-weight:700;
  font-variant-numeric:tabular-nums; pointer-events:none;
}
.tile .play{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.tile .play span{
  width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.55);
  display:grid; place-items:center; color:#fff; font-size:17px; padding-left:3px;
  backdrop-filter:blur(2px);
}
.tile .pick{
  position:absolute; top:8px; left:8px; z-index:3; width:20px; height:20px;
  accent-color:var(--accent); cursor:pointer;
}
.tile.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset}

/* Bouton d'enregistrement en haut à droite de chaque vignette.
   Toujours visible au doigt : il n'y a pas de survol sur mobile. */
.tile-save{
  position:absolute; top:6px; right:6px; z-index:3;
  width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff; font-size:15px; line-height:1;
  display:grid; place-items:center; padding:0;
  transition:background .15s, transform .15s;
}
.tile-save:hover{background:var(--accent); transform:scale(1.08)}
.tile-save:disabled{opacity:.6; cursor:wait}
@media(hover:hover){
  .tile-save{opacity:0}
  .tile:hover .tile-save,.tile-save:focus{opacity:1}
}

/* =================================================================
   LES TROIS CATÉGORIES (Photos / Vidéos / Fichiers)
   Trois colonnes égales sur grand écran, empilées sous 900px.
   ================================================================= */
.cats{
  display:grid; gap:14px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.cat{
  display:flex; flex-direction:column; gap:9px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; color:var(--txt); text-decoration:none; position:relative;
  overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.cat::before{                       /* liseré coloré propre à la catégorie */
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
}
.cat:hover{
  transform:translateY(-3px); box-shadow:var(--shadow);
  border-color:var(--accent); text-decoration:none;
}
.cat-image::before{background:linear-gradient(90deg,#6c8cff,#22d3ee)}
.cat-video::before{background:linear-gradient(90deg,#a855f7,#ec4899)}
.cat-other::before{background:linear-gradient(90deg,#f59e0b,#22c55e)}

.cat-head{display:flex; align-items:center; gap:9px}
.cat-icon{font-size:20px; line-height:1}
.cat-label{
  font-size:12px; font-weight:700; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--muted);
}
.cat-count{font-size:38px; font-weight:750; line-height:1}
.cat-sub{font-size:13px; color:var(--muted); margin-top:-4px}

.cat-preview{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
  margin-top:auto; padding-top:6px;
}
.cat-preview img,.cat-preview .pv-ph{
  width:100%; aspect-ratio:1/1; border-radius:8px; object-fit:cover;
  background:var(--bg2); border:1px solid var(--line);
}
.cat-preview .pv-ph{
  display:grid; place-items:center; font-size:11px; font-weight:700;
  color:var(--muted);
}
.cat-empty{grid-column:1 / -1; font-size:13px; color:var(--muted); padding:6px 0}
.cat-go{font-size:13px; font-weight:650; color:var(--accent)}

@media(max-width:900px){
  .cats{grid-template-columns:1fr}
  .cat-count{font-size:32px}
}

/* Vignettes de personnes */
.people{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.person{text-align:center}
.person .av{
  width:100%; aspect-ratio:1/1; border-radius:50%; object-fit:cover;
  border:3px solid var(--line); background:var(--bg2); transition:.18s;
}
.person:hover .av{border-color:var(--accent); transform:scale(1.03)}
.person .nm{margin-top:8px; font-weight:650; font-size:14px; word-break:break-word}
.person .sub{font-size:12px; color:var(--muted)}
.person .noav{display:grid; place-items:center; color:var(--muted); font-size:26px}

/* Barre de progression du scan */
.progress{height:8px; border-radius:99px; background:var(--bg2); overflow:hidden; margin:8px 0}
.progress > div{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .4s;
}

/* Zone de dépôt */
.drop{
  border:2px dashed var(--line); border-radius:var(--radius); padding:22px; text-align:center;
  transition:.2s; cursor:pointer; background:var(--bg2);
}
.drop.hot{border-color:var(--accent); background:rgba(108,140,255,.09)}
.drop .big{font-size:28px; margin-bottom:4px}

/* ---------------- Toasts ---------------- */
.toasts{position:fixed; top:68px; right:16px; z-index:120; display:flex; flex-direction:column; gap:9px}
.toast{
  min-width:245px; max-width:340px; padding:12px 15px; border-radius:12px;
  background:var(--card); border-left:4px solid var(--accent); box-shadow:var(--shadow);
  animation:slidein .28s ease; font-size:14px;
}
.toast.success{border-color:var(--ok)}
.toast.error{border-color:var(--err)}
.toast.info{border-color:var(--accent)}
@keyframes slidein{from{opacity:0; transform:translateX(40px)} to{opacity:1; transform:none}}

/* ---------------- Choix de la destination d'enregistrement ---------------- */
.choix{
  position:fixed; inset:0; z-index:220; background:rgba(0,0,0,.65);
  display:grid; place-items:end center; padding:16px;
  backdrop-filter:blur(3px);
}
.choix[hidden]{display:none}
.choix .boite{
  width:100%; max-width:420px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  animation:monte .22s ease;
}
.choix h3{margin:0}
.choix .btn{width:100%; justify-content:center; padding:13px}
.choix .muted{margin:0}
.choix .souvenir{
  display:flex; align-items:center; gap:9px; margin:2px 0 0;
  font-size:13.5px; color:var(--muted); cursor:pointer; font-weight:500;
}
.choix .souvenir input{width:18px; height:18px; accent-color:var(--accent); flex:none}
@keyframes monte{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
@media(min-width:700px){ .choix{place-items:center} }

/* ---------------- Modale plein écran ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.93);
  display:none; flex-direction:column; padding:14px;
}
.lightbox.open{display:flex}
.lightbox .lbhead{display:flex; align-items:center; gap:10px; color:#fff; padding:4px 6px 10px}
.lightbox .lbtitle{
  flex:1; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lightbox .lbbody{
  flex:1; display:grid; place-items:center; position:relative; min-height:0;
}
.lightbox img,.lightbox video{
  max-width:100%; max-height:100%; border-radius:10px; object-fit:contain;
}
.lightbox .nav{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px;
  border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff;
  font-size:22px; cursor:pointer; display:grid; place-items:center;
}
.lightbox .nav:hover{background:rgba(255,255,255,.28)}
.lightbox .prev{left:6px} .lightbox .next{right:6px}
.lightbox .lbfoot{color:#9aa6bd; font-size:12.5px; text-align:center; padding-top:8px}
.lightbox .btn{background:rgba(255,255,255,.12); color:#fff; border-color:transparent}

/* ---------------- Page de connexion ---------------- */
.loginwrap{
  min-height:100vh; display:grid; place-items:center; padding:20px;
  background:
    radial-gradient(900px 500px at 15% 0%,rgba(108,140,255,.22),transparent 60%),
    radial-gradient(900px 500px at 85% 100%,rgba(168,85,247,.22),transparent 60%),
    var(--bg);
}
.loginbox{
  width:100%; max-width:390px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:28px; box-shadow:var(--shadow);
}

/* =================================================================
   BOÎTE DE RÉCEPTION / DEMANDES
   ================================================================= */
.pastille{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--err); color:#fff; font-size:11.5px; font-weight:700;
  display:inline-grid; place-items:center; line-height:1;
}
.sidebar a.on .pastille{background:rgba(0,0,0,.35)}

.point{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px rgba(108,140,255,.2);
}
tr.non-lue td{background:rgba(108,140,255,.06)}
tr.non-lue b{color:var(--txt)}

.demande{
  border:1px solid var(--line); border-radius:12px; padding:14px;
  margin-bottom:12px; background:var(--bg2);
}
.demande.repondue{border-left:3px solid var(--ok)}
.demande:last-child{margin-bottom:0}
.msg{
  white-space:pre-wrap; word-break:break-word; margin:10px 0 0;
  font-size:14.5px; line-height:1.6;
}
.reponse{
  margin-top:12px; padding:12px 14px; border-radius:10px;
  background:rgba(34,197,94,.08); border-left:3px solid var(--ok);
  white-space:pre-wrap; word-break:break-word; font-size:14.5px; line-height:1.6;
}
textarea{font-family:inherit; line-height:1.55; min-height:90px}

/* --- Pied de page : identité du créateur --- */
.createur{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:26px; padding:16px 18px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--card);
}
.createur .logo.sm{width:40px; height:40px; font-size:16px; flex:none}
.createur .titre{font-weight:700; font-size:15px}
.createur .contacts{
  margin-left:auto; display:flex; flex-direction:column; gap:3px;
  font-size:13.5px; text-align:right;
}
.createur .contacts a{color:var(--accent); white-space:nowrap}
@media(max-width:640px){
  .createur{flex-direction:column; align-items:flex-start; text-align:left}
  .createur .contacts{margin-left:0; text-align:left}
}

.muted{color:var(--muted); font-size:13px}
.path{font-family:Consolas,monospace; font-size:12.5px; color:var(--muted); word-break:break-all}
.empty{text-align:center; padding:36px 16px; color:var(--muted)}
.empty .big{font-size:34px; margin-bottom:8px; opacity:.6}
.warnbox{
  border-left:4px solid var(--warn); background:rgba(245,158,11,.09);
  padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:14px;
}

/* ---------------- Téléphone ---------------- */
@media(max-width:820px){
  .layout{flex-direction:column}
  .sidebar{
    width:100%; border-right:0; border-bottom:1px solid var(--line);
    display:flex; gap:6px; overflow-x:auto; padding:9px;
  }
  .sidebar a{white-space:nowrap; margin:0}
  .sidebar .sep{display:none}
  .sidebar .count{margin-left:6px}
  .content{padding:14px}
  .toasts{left:12px; right:12px; top:62px}
  .toast{max-width:none}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px}
  .people{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .topbar{padding:9px 12px; gap:8px}
  .brand span{display:none}
  h1{font-size:20px}
  .lightbox .nav{width:40px; height:40px}
}