/* RANCINAN — backoffice */
:root { --bg:#12141a; --panel:#1b1e27; --panel2:#232735; --line:#2e3342; --txt:#e7e9ef; --mut:#8b93a7; --or:#d8a94b; --ok:#3fb27f; --err:#e5645b; --blue:#5b8cff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:15px; line-height:1.55; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:1.5rem; margin:.2rem 0 1.2rem; } h2 { font-size:1.1rem; margin:.2rem 0 .8rem; } h2 small { color:var(--mut); font-weight:400; }

/* Login */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:var(--panel); padding:2.4rem; border-radius:12px; width:min(360px,92vw); border:1px solid var(--line); display:flex; flex-direction:column; gap:.9rem; }
.login-box h1 { text-align:center; letter-spacing:.2em; margin:0; }
.login-sub { text-align:center; color:var(--mut); margin:0 0 .6rem; text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; }
.login-box label { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; color:var(--mut); }
.login-box .back { text-align:center; color:var(--mut); font-size:.85rem; }

/* Top bar */
.admin-top { display:flex; align-items:center; gap:1.4rem; background:var(--panel); border-bottom:1px solid var(--line); padding:.7rem 1.2rem; position:sticky; top:0; z-index:10; flex-wrap:wrap; }
.logo { color:var(--txt); font-weight:700; letter-spacing:.15em; } .logo small { color:var(--or); font-weight:400; letter-spacing:.1em; }
.admin-nav { display:flex; gap:.3rem; flex-wrap:wrap; }
.admin-nav a { color:var(--mut); padding:.4rem .8rem; border-radius:7px; font-size:.85rem; }
.admin-nav a:hover { background:var(--panel2); text-decoration:none; color:var(--txt); }
.admin-nav a.on { background:var(--or); color:#000; }
.admin-right { margin-left:auto; display:flex; gap:1rem; align-items:center; }
.admin-right a { color:var(--mut); font-size:.85rem; } .logout { color:var(--err) !important; }
.admin-main { max-width:1200px; margin:0 auto; padding:1.6rem 1.2rem 4rem; }

/* Messages */
.msg { padding:.7rem 1rem; border-radius:8px; margin:0 0 1.2rem; font-size:.9rem; }
.msg.ok { background:rgba(63,178,127,.15); color:var(--ok); border:1px solid rgba(63,178,127,.3); }
.msg.err { background:rgba(229,100,91,.15); color:var(--err); border:1px solid rgba(229,100,91,.3); }
.muted { color:var(--mut); } .small { font-size:.82rem; } .nowrap { white-space:nowrap; }

/* Forms */
.form, .panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.4rem; margin-bottom:1.4rem; }
.form.slim { padding:1rem 1.4rem; }
label { display:block; margin-bottom:.9rem; font-size:.82rem; color:var(--mut); }
input, textarea, select { width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:7px; padding:.55rem .7rem; font:inherit; margin-top:.25rem; }
input:focus, textarea:focus { outline:none; border-color:var(--or); }
textarea { resize:vertical; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 1.2rem; }
@media (max-width:680px){ .grid2 { grid-template-columns:1fr; } }
button, .btn { background:var(--or); color:#000; border:0; border-radius:7px; padding:.55rem 1.1rem; font:inherit; font-weight:600; cursor:pointer; }
button:hover, .btn:hover { filter:brightness(1.08); text-decoration:none; }
button:disabled { opacity:.35; cursor:default; }
button.sm, .btn.sm { padding:.35rem .7rem; font-size:.82rem; }
button.danger { background:transparent; color:var(--err); border:1px solid var(--err); }
button.danger:hover { background:var(--err); color:#fff; }
.inline { display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.inline input { width:auto; flex:1; min-width:160px; }
.inline label { margin:0; }
.check { display:flex; align-items:center; gap:.55rem; margin:.4rem 0 .8rem; color:var(--txt); cursor:pointer; font-size:.9rem; }
.check input { width:auto; margin:0; }
/* éditeur de texte enrichi (mise en forme) */
.rte-field { margin-bottom:.9rem; }
.rte-label { display:block; font-size:.82rem; color:var(--mut); margin-bottom:.3rem; }
.rte { border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--panel2); }
.rte-tools { display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:5px; background:var(--panel); border-bottom:1px solid var(--line); }
.rte-tools button { display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--txt); border:1px solid transparent; border-radius:5px; padding:.25rem .45rem; font-size:.9rem; min-width:30px; height:28px; cursor:pointer; line-height:1; }
.rte-tools button svg { display:block; }
.rte-tools button:hover { background:var(--panel2); border-color:var(--line); }
.rte-tools select { width:auto; margin:0; padding:.2rem .3rem; font-size:.8rem; }
.rte-sep { width:1px; height:20px; background:var(--line); margin:0 5px; }
.rte-color { display:inline-flex; align-items:center; gap:2px; cursor:pointer; color:var(--txt); font-size:.9rem; }
.rte-color input[type=color] { width:22px; height:22px; padding:0; border:none; background:none; cursor:pointer; }
.rte-edit { min-height:70px; padding:.6rem .7rem; color:var(--txt); font-size:.95rem; line-height:1.5; outline:none; }
.rte-edit:focus { background:rgba(255,255,255,.03); }
.ib { display:inline; }
.ib button { background:var(--panel2); color:var(--txt); padding:.3rem .55rem; }
.ib button:hover { background:var(--line); }

/* KPI + stats */
.cards-kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.4rem; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.2rem; text-align:center; }
.kpi-v { display:block; font-size:2rem; font-weight:700; color:var(--or); }
.kpi-l { color:var(--mut); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.chart30 { display:flex; align-items:flex-end; gap:3px; height:150px; padding:.5rem 0; }
.c30-bar { flex:1; display:flex; align-items:flex-end; height:100%; }
.c30-bar > span { display:block; width:100%; background:linear-gradient(var(--or),rgba(216,169,75,.4)); border-radius:2px 2px 0 0; transition:height .3s; }
.c30-bar:hover > span { background:var(--blue); }
.statbars { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.statbars li { display:grid; grid-template-columns:minmax(90px,30%) 1fr auto; align-items:center; gap:.7rem; font-size:.86rem; }
.sb-k { color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-track { background:var(--panel2); border-radius:5px; height:12px; overflow:hidden; }
.sb-fill { display:block; height:100%; background:var(--or); border-radius:5px; }
.sb-v { color:var(--mut); font-variant-numeric:tabular-nums; }
/* mini-barres verticales (heures / jours) */
.colchart { display:flex; align-items:flex-end; gap:3px; height:130px; padding-top:.4rem; }
.cc-bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; }
.cc-bar > span { display:block; width:100%; background:linear-gradient(var(--or),rgba(216,169,75,.35)); border-radius:2px 2px 0 0; min-height:2px; transition:height .3s; }
.cc-bar:hover > span { background:var(--blue); }
.cc-bar em { font-style:normal; font-size:.6rem; color:var(--mut); height:.8em; }
.cc-bar b { font-weight:600; font-size:.58rem; color:var(--mut); height:.9em; font-style:normal; }
.cc-bar.peak > span { background:linear-gradient(var(--or),rgba(216,169,75,.7)); }
.cc-bar.peak b, .cc-bar.peak em { color:var(--or); }
/* valeur + part en % dans les barres horizontales */
.sb-v { display:flex; align-items:baseline; gap:.4rem; justify-content:flex-end; }
.sb-v em { font-style:normal; color:var(--mut); font-size:.8em; }
/* graphe 30 jours : légende, axe, jour courant */
.chart-legend { display:flex; gap:1.6rem; flex-wrap:wrap; margin-bottom:.9rem; color:var(--mut); font-size:.85rem; }
.chart-legend b { color:var(--or); font-size:1.15rem; font-weight:700; margin-right:.25rem; }
.chart-axis { display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; color:var(--mut); font-size:.78rem; }
.c30-bar.today > span { background:var(--or); box-shadow:0 0 6px rgba(216,169,75,.6); }
.section-sep { font-size:1.15rem; }
/* photos les plus ouvertes */
.statphotos { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.statphotos li { display:grid; grid-template-columns:44px 1fr 90px auto; align-items:center; gap:.7rem; font-size:.84rem; }
.statphotos img { width:44px; height:32px; object-fit:cover; border-radius:4px; background:var(--panel2); }
.sp-name { color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.section-sep { margin:1.6rem 0 1rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--or); }
.big-num { font-size:2rem; font-weight:700; color:var(--or); margin:.3rem 0; }
.grid2 .panel, .panel.wide { margin-bottom:0; }
.grid2:has(.panel) { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.2rem; }
.panel.wide { grid-column:1/-1; }

/* Lists / tables */
.list { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:1.4rem; }
.list th, .list td { padding:.7rem .8rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.list th { background:var(--panel2); color:var(--mut); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.list tr:last-child td { border-bottom:0; }
.mini { height:34px; width:auto; border-radius:4px; vertical-align:middle; }
/* glisser-déposer des lignes */
.grip { cursor:grab; color:var(--mut); font-size:1.15rem; line-height:1; user-select:none; text-align:center; }
.list.sortable tr[draggable] { cursor:grab; }
.list.sortable tr.dragging { opacity:.45; background:var(--panel2); }
.rnum { color:var(--mut); font-variant-numeric:tabular-nums; }
/* navigation d'édition série/expo */
.edit-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.edit-nav .back-all { color:var(--mut); }
.edit-nav-move { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.edit-nav-move .btn { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edit-nav-move .btn.disabled { opacity:.3; pointer-events:none; }
.edit-nav-move select { width:auto; min-width:160px; max-width:260px; }
.mini2 { height:70px; width:auto; border-radius:5px; float:left; margin-right:1rem; }

/* Background picker */
.bg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; margin:.6rem 0 1rem; max-height:420px; overflow:auto; padding:.4rem; background:var(--bg); border-radius:8px; border:1px solid var(--line); }
.bg-thumb { display:block; position:relative; margin:0; cursor:pointer; border-radius:6px; overflow:hidden; height:90px; border:3px solid transparent; }
.bg-thumb img { display:block; width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .2s; }
.bg-thumb input { position:absolute; top:6px; left:6px; width:18px; height:18px; margin:0; z-index:2; }
.bg-thumb.sel { border-color:var(--or); } .bg-thumb.sel img, .bg-thumb:hover img { opacity:1; }

/* Thumbs management */
/* zone de glisser-déposer pour l'upload */
.upload-form .dropzone { border:2px dashed var(--line); border-radius:10px; padding:1.6rem; text-align:center; cursor:pointer; background:var(--panel2); transition:border-color .2s, background .2s; }
.upload-form .dropzone:hover { border-color:var(--or); }
.upload-form .dropzone.over { border-color:var(--or); background:rgba(216,169,75,.1); }
.upload-form .dropzone input[type=file] { display:none; }
.dz-msg { color:var(--mut); font-size:.95rem; line-height:1.6; pointer-events:none; }
.dz-msg strong { color:var(--txt); font-size:1.05rem; }
.dz-previews { display:flex; flex-wrap:wrap; gap:6px; margin:.9rem 0; }
.dz-thumb { width:58px; height:58px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.upload-form button[disabled] { opacity:.4; cursor:default; }
.thumbs-manage { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.tm { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.tm-grip { position:absolute; top:6px; left:6px; z-index:3; cursor:grab; color:#fff; background:rgba(0,0,0,.55); border-radius:5px; padding:0 6px; font-size:1rem; line-height:1.5; user-select:none; }
.tm-grip:active { cursor:grabbing; }
.tm.dragging { opacity:.4; outline:2px dashed var(--or); outline-offset:-2px; }
.tm > img { width:100%; height:150px; object-fit:cover; display:block; }
.tm-title { display:flex; gap:.3rem; padding:.5rem; margin:0; }
.tm-title input { margin:0; }
.tm-actions { display:flex; gap:.3rem; padding:0 .5rem .5rem; }
.movie-edit, .card-edit { border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; margin-bottom:1rem; background:var(--panel2); }
.movie-edit legend, .card-edit legend { color:var(--or); padding:0 .4rem; font-size:.85rem; }
.pl-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.pl-info { display:flex; align-items:center; gap:1rem; }
.pl-info .mini2 { height:54px; margin:0; float:none; border-radius:5px; }
.pl-actions { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.pl-actions .ib button { background:var(--panel2); color:var(--txt); }
.pl-actions .ib button.danger { background:transparent; color:var(--err); }
h3 { font-size:1rem; margin:.2rem 0 .8rem; }