/* ============================================================
   BLIIMP CMS — « Nocturne Glass » design system
   Feuille partagee. Placez cms.css + bliimp-logo.png au meme
   niveau et liez-la dans chaque page : <link rel="stylesheet" href="cms.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@300;400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root{
  --navy:#0c0031;
  --navy-2:#150a42;
  --cream:#f4f0e6;
  --ink:#160a30;             /* texte sur surfaces claires/orange */
  --orange:#ff4802;
  --amber:#ff9c07;
  --magenta:#cd2bfd;
  --green:#38d17f;
  --red:#ff5d6c;

  --muted:rgba(244,240,230,.60);
  --muted-2:rgba(244,240,230,.42);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);

  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.09);
  --glass-hi:rgba(255,255,255,.14);
  --glass-brd:rgba(255,255,255,.13);

  --grad-warm:linear-gradient(120deg,var(--orange),var(--amber));
  --grad-brand:linear-gradient(120deg,var(--orange) 0%,var(--magenta) 100%);

  --r-lg:22px; --r-md:15px; --r-sm:11px; --r-pill:100px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.65);
  --shadow-lg:0 44px 100px -40px rgba(0,0,0,.75);
  --blur:saturate(150%) blur(22px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Fustat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--cream);
  background:var(--navy);min-height:100vh;
  font-size:15px;line-height:1.5;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv01","ss01";
}
/* Aurore : blobs degrades animes, en fond fixe */
body::before{
  content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 42% at 18% 22%,rgba(255,72,2,.34),transparent 68%),
    radial-gradient(38% 40% at 82% 16%,rgba(205,43,253,.30),transparent 70%),
    radial-gradient(46% 46% at 74% 84%,rgba(255,156,7,.26),transparent 72%),
    radial-gradient(42% 42% at 12% 82%,rgba(205,43,253,.22),transparent 72%);
  filter:blur(36px);
  animation:aurora 26s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,transparent 40%,rgba(7,0,26,.55) 100%);
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.95}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.09);opacity:1}
  100%{transform:translate3d(-2.5%,2.5%,0) scale(1.05);opacity:.9}
}

::selection{background:rgba(255,72,2,.35);color:#fff}
a{color:var(--amber);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--orange)}

/* Scrollbar */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:20px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);background-clip:padding-box}

/* ---------- Typo ---------- */
h1{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 6px;line-height:1.1}
h2{font-size:17px;font-weight:700;letter-spacing:-.015em;margin:0 0 4px}
h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
p{margin:0 0 16px}
.muted{color:var(--muted);font-size:14px}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- Logo (image recoloree crème via filtre) ---------- */
.bliimp-logo{
  display:inline-block;height:38px;width:auto;flex:none;
  /* noir -> creme */
  filter:brightness(0) invert(1) sepia(.14) saturate(1.4) hue-rotate(3deg);
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none
}

/* ---------- Header (glass, sticky) ---------- */
header{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 26px;position:sticky;top:0;z-index:30;
  background:rgba(10,4,38,.55);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line);color:var(--cream);
}
header .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.01em;font-size:16px}
header .brand .tag{
  background:none;border:0;padding:0 0 0 11px;border-radius:0;
  font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0;white-space:nowrap;position:relative
}
header .brand .tag::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:var(--line)}
header .spacer{flex:1}
header .who{font-size:13px;color:var(--muted)}
header select{
  background:var(--glass);color:var(--cream);border:1px solid var(--glass-brd);
  border-radius:var(--r-sm);padding:9px 13px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
header select option{color:#1c2b36;background:#f4f0e6}

/* ---------- Layout ---------- */
main{max-width:1120px;margin:0 auto;padding:34px 24px 72px;position:relative;z-index:1}

/* ---------- Boutons ---------- */
button,.btn,input[type=submit]{font-family:inherit}
.btn,button.btn,a.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--r-sm);
  padding:10px 17px;font-weight:700;font-size:14px;line-height:1;cursor:pointer;
  text-decoration:none;white-space:nowrap;letter-spacing:-.01em;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn svg,button svg{width:16px;height:16px;flex:none}

/* Primaire (orange -> ambre) */
.btn-p,#new,#imp-go,#recoBtn{
  background:var(--grad-warm);color:var(--ink);border-color:transparent;
  box-shadow:0 10px 26px -12px rgba(255,72,2,.7);
}
.btn-p:hover,#new:hover,#imp-go:hover,#recoBtn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(255,72,2,.85)}
.btn-p:active,#new:active{transform:translateY(0)}

/* Verre (secondaire) */
.btn-g,.btn-s,.btn-view,#logout,#imp-cancel{
  background:var(--glass-2);color:var(--cream);border-color:var(--glass-brd);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-g:hover,.btn-s:hover,.btn-view:hover,#logout:hover,#imp-cancel:hover{
  background:var(--glass-hi);transform:translateY(-2px);border-color:rgba(255,255,255,.22)
}

/* Sombre / ink (edit) */
.btn-edit{background:var(--cream);color:var(--ink);border-color:transparent}
.btn-edit:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(244,240,230,.5)}

/* Danger */
.btn-d,.btn-del{background:transparent;color:var(--red);border-color:transparent}
.btn-del:hover,.btn-d:hover{background:rgba(255,93,108,.14);color:#ff8794}

/* Petit bouton */
.mini{font-size:12.5px;color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.mini:hover{color:var(--amber)}

/* Bouton focus clavier */
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px
}

/* ---------- Surfaces glass ---------- */
.card,.panel,.box{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-lg);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08);
  padding:22px 24px;position:relative;
}
.card{transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}

/* Grille projets */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.grid .card{display:flex;flex-direction:column;gap:6px}
.card .meta{color:var(--muted);font-size:13px}
.card .row{display:flex;gap:10px;margin-top:16px}
.card .row .btn{flex:1}
.card .row .btn-del{flex:0 0 auto;padding:10px 12px}
.row2{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center}

/* Vide */
.empty{
  background:var(--glass);border:1.5px dashed var(--glass-brd);border-radius:var(--r-lg);
  padding:52px 26px;text-align:center;color:var(--muted);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

/* ---------- Inputs ---------- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--cream)}
input,select,textarea{font-family:inherit}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=file],textarea,.field{
  width:100%;padding:12px 14px;font-size:15px;color:var(--cream);
  background:rgba(255,255,255,.05);border:1.5px solid var(--glass-brd);border-radius:var(--r-md);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--orange);background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px rgba(255,72,2,.16)
}
input[type=file]{padding:10px 12px;cursor:pointer}
input[type=file]::file-selector-button{
  font-family:inherit;font-weight:600;font-size:13px;margin-right:12px;cursor:pointer;
  background:var(--glass-2);color:var(--cream);border:1px solid var(--glass-brd);border-radius:8px;padding:7px 12px
}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:20px;
  background:rgba(6,0,24,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal.show{display:grid;animation:fade .25s var(--ease)}
.modal .box{
  width:min(94vw,440px);padding:28px;border-radius:var(--r-lg);
  background:rgba(28,16,66,.72);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--shadow-lg);animation:pop .32s var(--ease)}
.modal h2{margin:0 0 4px;font-size:19px}
.modal .actions{display:flex;gap:10px;margin-top:24px}
.modal .actions button{flex:1;padding:12px}
.note{font-size:12px;color:var(--muted);margin-top:8px}
.status{font-size:13px;margin-top:12px;min-height:18px;color:var(--muted)}
.status.err{color:var(--red)}

/* ---------- Onglets ---------- */
.tabs{
  display:flex;gap:4px;padding:6px;margin:0 auto;max-width:1120px;
  background:transparent;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  background:transparent;border:0;color:var(--muted);padding:12px 16px;
  font-weight:600;font-size:14px;cursor:pointer;border-radius:var(--r-sm);position:relative;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;transition:color .2s var(--ease),background .2s var(--ease)
}
.tabs button:hover{color:var(--cream);background:var(--glass)}
.tabs button.on{color:var(--cream);background:var(--glass-2)}
.tabs button.on::after{
  content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:var(--grad-warm)
}
.tab{display:none}.tab.on{display:block}

/* Ligne d'onglets facon barre glass (option) */
.tabbar{
  position:sticky;top:0;z-index:20;
  background:rgba(10,4,38,.5);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line)
}

/* ---------- Badges / statuts ---------- */
.st,.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:4px 11px;border-radius:var(--r-pill);letter-spacing:.01em;line-height:1.2
}
.st-ok,.pill.ok{background:rgba(56,209,127,.16);color:var(--green);border:1px solid rgba(56,209,127,.3)}
.st-wait,.pill.wait{background:rgba(255,156,7,.16);color:var(--amber);border:1px solid rgba(255,156,7,.3)}
.st-err,.pill.err{background:rgba(255,93,108,.16);color:var(--red);border:1px solid rgba(255,93,108,.3)}
.st-info,.pill.info{background:rgba(205,43,253,.16);color:#e0a3ff;border:1px solid rgba(205,43,253,.3)}
.tag{
  display:inline-block;background:rgba(255,156,7,.14);color:var(--amber);
  border:1px solid rgba(255,156,7,.3);border-radius:var(--r-pill);padding:5px 14px;font-size:12.5px;font-weight:700
}

/* ---------- KPI ---------- */
.kpi{
  flex:1;min-width:140px;border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 17px;background:rgba(255,255,255,.03)
}
.kpi .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.kpi .v{font-size:27px;font-weight:800;margin-top:5px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- Tableaux ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line)
}
td{padding:12px;border-bottom:1px solid var(--line-2);font-variant-numeric:tabular-nums}
tbody tr:hover,tr:hover td{background:rgba(255,255,255,.03)}

/* ---------- Selecteur de periode ---------- */
.ranges{display:inline-flex;gap:4px;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-pill);padding:4px}
.ranges button{border:0;background:transparent;color:var(--muted);padding:7px 14px;border-radius:var(--r-pill);font-weight:600;font-size:13px;cursor:pointer;transition:.2s var(--ease)}
.ranges button:hover{color:var(--cream)}
.ranges button.on{background:var(--grad-warm);color:var(--ink)}

/* ---------- Spinner ---------- */
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--cream);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Skeleton ---------- */
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border-radius:8px;color:transparent!important}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:rgba(28,16,66,.85);color:var(--cream);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  padding:13px 20px;border-radius:var(--r-md);font-size:14px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;z-index:80;transition:.3s var(--ease)
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-color:rgba(255,93,108,.5)}

/* ---------- Bloc « bientot » ---------- */
.soon{display:flex;flex-direction:column;align-items:center;text-align:center;padding:46px 20px;color:var(--muted)}
.soon .big{width:56px;height:56px;margin-bottom:12px;color:var(--amber)}
.soon .big svg{width:100%;height:100%}
.soon .tag{margin-top:14px}

/* ---------- Barre de progression / mini-bar ---------- */
.bar{position:relative;padding:8px 11px;border-radius:9px;overflow:hidden;white-space:nowrap}
.bar .fill{position:absolute;inset:0 auto 0 0;background:rgba(255,255,255,.08);border-radius:9px}
.bar .lbl{position:relative}

/* ---------- Apparition en cascade ---------- */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal{opacity:0;animation:fadeUp .55s var(--ease) forwards}
main>*{animation:fadeUp .5s var(--ease) both}
main>*:nth-child(1){animation-delay:.02s}
main>*:nth-child(2){animation-delay:.06s}
main>*:nth-child(3){animation-delay:.1s}
main>*:nth-child(4){animation-delay:.14s}
main>*:nth-child(5){animation-delay:.18s}
main>*:nth-child(6){animation-delay:.22s}
/* cartes injectees dans .grid */
.grid .card{animation:fadeUp .5s var(--ease) both}
.grid .card:nth-child(1){animation-delay:.04s}
.grid .card:nth-child(2){animation-delay:.1s}
.grid .card:nth-child(3){animation-delay:.16s}
.grid .card:nth-child(4){animation-delay:.22s}
.grid .card:nth-child(5){animation-delay:.28s}
.grid .card:nth-child(6){animation-delay:.34s}
.grid .card:nth-child(n+7){animation-delay:.4s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  header{padding:12px 16px;gap:10px}
  main{padding:24px 16px 56px}
  .grid{grid-template-columns:1fr}
}