:root{
  --canvas: #2a2620;
  --canvas-deep: #1c1914;
  --canvas-light: #353028;
  --cream: #FFEDD7;
  --cream-muted: #6c5f51;
  --cream-soft: #A89B88;
  --olive: #7A8260;
  --olive-light: #9aab76;
  --olive-dark: #445231;
  --cork: #382416;
  --cork-border: #40372e;
  --accent: #dc5000;
  --accent-muted: #b85a30;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ background:var(--canvas); color:var(--cream); overflow-x:hidden; -webkit-text-size-adjust:100%; }
body{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  background:var(--canvas);
  color:var(--cream);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  overflow-x:hidden;
}
img, video{ max-width:100%; display:block; }
button{ font-family:inherit; }
::selection{ background:rgba(255,237,215,0.18); color:var(--cream); }
::-webkit-scrollbar{ width:4px; }
::-webkit-scrollbar-track{ background:var(--canvas); }
::-webkit-scrollbar-thumb{ background:var(--cork-border); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--olive); }

.o-dashline{ width:100%; height:1px; border-top:1px dashed var(--cork-border); }
.o-label{ font-size:0.75rem; font-weight:500; letter-spacing:0.02em; color:var(--cream-muted); text-transform:uppercase; }
.o-panel{
  border:1px solid rgba(255,237,215,0.1);
  border-radius:0;
  background:rgba(255,237,215,0.04);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.o-tag{
  display:inline-block; padding:0.3rem 0.7rem; font-size:0.75rem; font-weight:500;
  border:1px solid rgba(255,237,215,0.1); border-radius:0; background:rgba(255,237,215,0.03); color:var(--cream-soft);
}
.o-ghost-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.75rem 1.5rem;
  border:1px solid rgba(255,237,215,0.35); border-radius:0; color:var(--cream); font-weight:500; font-size:0.875rem;
  transition:all .3s ease; background:transparent; cursor:pointer; white-space:nowrap;
}
.o-ghost-btn:hover{ border-color:var(--cream); background:rgba(255,237,215,0.05); }
.o-ghost-btn:disabled{ opacity:.4; cursor:default; }
.o-ghost-btn.primary{ border-color:var(--olive-light); color:var(--olive-light); }
.o-ghost-btn.danger{ border-color:rgba(220,80,0,0.5); color:var(--accent); }
.o-ghost-btn:focus-visible, input:focus-visible{ outline:1px solid var(--olive-light); outline-offset:2px; }

.wrap{ max-width: 1000px; margin:0 auto; padding: 0 1.25rem; }
.hidden{ display:none !important; }

/* nav */
nav.top{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding: 1rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom, var(--canvas) 0%, rgba(42,38,32,0.95) 65%, transparent 100%);
}
.brand{ font-size:1rem; font-weight:500; color:var(--cream); text-decoration:none; display:flex; align-items:center; gap:0.5rem; }
.brand span{ color:var(--olive-light); }
.nav-actions{ display:flex; gap:0.6rem; align-items:center; }
.icon-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,237,215,0.2); background:transparent; color:var(--cream-soft); cursor:pointer;
  transition:all .2s ease;
}
.icon-btn:hover{ border-color:var(--cream); color:var(--cream); }

/* tabs */
.tabbar{ display:flex; gap:1.5rem; margin-top:0.5rem; }
.tab{
  font-size:0.75rem; font-weight:500; color:var(--cream-muted); text-transform:uppercase; letter-spacing:0.05em;
  padding-bottom:0.6rem; border-bottom:2px solid transparent; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none;
}
.tab.active{ color:var(--cream); border-bottom-color:var(--olive-light); }

main{ padding: 7.5rem 0 4rem; min-height:100dvh; }

/* login */
.login-screen{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.login-panel{ width:100%; max-width:360px; padding:2rem 1.75rem; }
.login-panel h1{ font-size:1.4rem; font-weight:500; margin-bottom:0.4rem; }
.login-panel p{ color:var(--cream-soft); font-size:0.85rem; margin-bottom:1.6rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:0.72rem; color:var(--cream-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.4rem; }
.field input{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--cork-border);
  outline:none; font-family:inherit; font-size:1rem; color:var(--cream); padding:0.6rem 0.1rem; transition:border-color .25s ease;
}
.field input:focus{ border-color:var(--olive-light); }
.login-panel .o-ghost-btn{ width:100%; margin-top:0.5rem; }
.form-error{ color:var(--accent); font-size:0.8rem; margin-top:0.9rem; min-height:1.1rem; }

/* section title / header */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap; }
.section-head h1{ font-size:1.4rem; font-weight:500; letter-spacing:-0.01em; }
.empty-state{ color:var(--cream-muted); font-size:0.9rem; padding:3rem 0; text-align:center; }

/* recherche d'albums */
.search-box{
  display:flex; align-items:center; gap:0.6rem; padding:0.7rem 0.9rem; margin-bottom:0.9rem;
  border:1px solid rgba(255,237,215,0.12); background:rgba(255,237,215,0.03); color:var(--cream-muted);
}
.search-box svg{ flex:none; }
.search-box input{
  flex:1; background:transparent; border:none; outline:none; font-family:inherit; font-size:0.9rem; color:var(--cream);
}
.search-box input::placeholder{ color:var(--cream-muted); }

/* bandeau "nouvel album" : large et court, séparé de la grille */
.new-album-banner{
  width:100%; display:flex; align-items:center; justify-content:center; gap:0.55rem;
  padding:0.85rem 1rem; margin-bottom:1.25rem;
  border:1px dashed var(--cork-border); color:var(--cream-muted); cursor:pointer; transition:all .2s ease; background:transparent;
  font-size:0.9rem; font-weight:500;
}
.new-album-banner:hover{ border-color:var(--olive-light); color:var(--olive-light); }
.new-album-banner svg{ width:18px; height:18px; }

/* album grid */
.grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0.9rem; }
@media (min-width:560px){ .grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:820px){ .grid{ grid-template-columns:repeat(4, 1fr); } }

.album-card{ cursor:pointer; overflow:hidden; transition:border-color .2s ease; }
.album-card:hover{ border-color:rgba(255,237,215,0.3); }
.album-cover{
  aspect-ratio:1/1; background:var(--canvas-deep); display:flex; align-items:center; justify-content:center;
  color:var(--cream-muted); font-size:1.8rem; font-weight:500; overflow:hidden; position:relative;
}
.album-cover img, .album-cover video{ width:100%; height:100%; object-fit:cover; }
.album-info{ padding:0.75rem 0.85rem; }
.album-info .name{ font-size:0.9rem; font-weight:500; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.album-info .count{ font-size:0.72rem; color:var(--cream-muted); margin-top:0.2rem; }

/* album detail */
.album-header{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.back-btn{ display:inline-flex; align-items:center; gap:0.4rem; color:var(--cream-soft); background:none; border:none; cursor:pointer; font-size:0.8rem; padding:0.4rem 0; }
.back-btn:hover{ color:var(--cream); }

.media-thumb{
  aspect-ratio:1/1; background:var(--canvas-deep); position:relative; overflow:hidden; cursor:pointer; border:1px solid rgba(255,237,215,0.08);
}
.media-thumb img, .media-thumb video{ width:100%; height:100%; object-fit:cover; }
.media-thumb .play-badge{
  position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center;
  background:rgba(28,25,20,0.15); pointer-events:none;
}
.media-thumb .play-badge svg{ width:32px; height:32px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.media-thumb .del-btn{
  position:absolute; top:6px; right:6px; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:rgba(28,25,20,0.75); color:var(--cream); border:none; cursor:pointer; z-index:2;
}
.media-thumb .del-btn:hover{ background:var(--accent); }

.upload-zone{
  display:block; width:100%;
  border:1px dashed var(--cork-border); padding:1.6rem; text-align:center; margin-bottom:1.5rem; cursor:pointer; transition:border-color .2s ease;
}
.upload-zone:hover, .upload-zone.dragover{ border-color:var(--olive-light); }
.upload-zone p{ font-size:0.85rem; color:var(--cream-soft); }
.upload-zone input{ display:none; }
.upload-progress{ font-size:0.75rem; color:var(--cream-muted); margin-top:0.6rem; min-height:1rem; }

/* trash */
.trash-section{ margin-bottom:2rem; }
.trash-section h2{ font-size:0.75rem; font-weight:500; letter-spacing:0.02em; color:var(--cream-muted); text-transform:uppercase; margin-bottom:1rem; padding-bottom:0.9rem; }
.trash-item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.9rem 1.1rem; margin-bottom:0.6rem; flex-wrap:wrap; }
.trash-item .info{ display:flex; align-items:center; gap:0.8rem; min-width:0; }
.trash-item .thumb{ width:44px; height:44px; background:var(--canvas-deep); flex-shrink:0; overflow:hidden; }
.trash-item .thumb img, .trash-item .thumb video{ width:100%; height:100%; object-fit:cover; }
.trash-item .label{ font-size:0.85rem; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trash-item .sub{ font-size:0.72rem; color:var(--cream-muted); }
.trash-item .actions{ display:flex; gap:0.5rem; }
.trash-item .actions button{ padding:0.5rem 0.9rem; font-size:0.75rem; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(17,15,12,0.94); z-index:100; display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.lightbox img, .lightbox video{ max-height:88vh; max-width:100%; margin:0 auto; }
.lightbox .lb-close{
  position:absolute; top:1.1rem; right:1.1rem; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,237,215,0.08); border:1px solid rgba(255,237,215,0.2); color:var(--cream); cursor:pointer;
}
.lightbox .lb-del{
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
}

/* modal (créer album / confirmation) */
.modal-overlay{ position:fixed; inset:0; background:rgba(17,15,12,0.7); z-index:90; display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.modal-box{ width:100%; max-width:380px; padding:1.75rem; }
.modal-box h3{ font-size:1.1rem; font-weight:500; margin-bottom:1.1rem; }
.modal-box .field{ margin-bottom:1.3rem; }
.modal-actions{ display:flex; gap:0.6rem; justify-content:flex-end; }

.cover-picker{ display:block; cursor:pointer; }
.cover-preview{
  width:100%; aspect-ratio:16/9; background:var(--canvas-deep); border:1px dashed var(--cork-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem;
  color:var(--cream-muted); font-size:0.8rem; overflow:hidden; transition:border-color .2s ease;
}
.cover-picker:hover .cover-preview{ border-color:var(--olive-light); color:var(--olive-light); }
.cover-preview img{ width:100%; height:100%; object-fit:cover; }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--canvas-deep); border:1px solid var(--cork-border); color:var(--cream);
  padding:0.65rem 1.1rem; font-size:0.8rem; opacity:0; transition:all .25s ease; pointer-events:none; z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:480px){
  .wrap{ padding:0 1rem; }
  main{ padding-top:6.5rem; }
}