/* ============================================================
   SNAPSHOT MEDIA — KIT DE DESIGN PARTAGÉ
   Univers visuel commun à toutes les apps du dashboard.
   Polices Switzer/Satoshi auto-hébergées + palette corail/neutres.
   Importer via <link rel="stylesheet" href="theme.css"> et ui.js.
   ============================================================ */

/* ---- POLICES (auto-hébergées) ---- */
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}

/* ---- TOKENS ---- */
:root{
  --canvas:#ECECEC;        /* off-white creusé pour faire ressortir les cartes */
  --surface:#FFFFFF;
  --surface-2:#F5F5F5;     /* fills doux, hover */
  --border:#EAEAEA;
  --border-strong:#CFCFCF;
  --ink:#0B0B0B;           /* texte principal */
  --ink-2:#4A4D54;         /* texte secondaire */
  --ink-3:#767676;         /* labels / muted — 4.54:1 WCAG AA */
  --forest:#1D2026;        /* sidebar */
  --forest-2:#0B0B0B;
  --gold:#ED5847;          /* corail (accent unique de marque) */
  --gold-deep:#B82D1C;     /* corail lisible sur blanc */

  --primary:#1D2026;       /* structurel sombre */
  --primary-2:#4A4D54;     /* neutre moyen */
  --accent:#ED5847;        /* corail : actions */
  --pos:#4A4D54;           /* la marque n'a pas de vert */
  --neg:#B82D1C;           /* alertes */
  --muted:#4A4D54;
  --muted-2:#767676;
  --coral:#ED5847; --coral-soft:#F6ABA2; --coral-50:#E53A26;

  --font-display:'Switzer',-apple-system,sans-serif;
  --font-body:'Satoshi',-apple-system,sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:24px;
  --sh:0 1px 2px rgba(11,11,11,.05), 0 6px 18px rgba(11,11,11,.06);
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:-.015em;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:var(--gold-deep);}
.num{font-variant-numeric:tabular-nums;}
::selection{background:rgba(237,88,71,.20);}

/* ---- SHELL : sidebar + main ---- */
.app{display:flex; min-height:100vh;}
.scrim{display:none;}

.sidebar{
  width:266px; flex:none; background:var(--forest); color:#D7DCD4;
  display:flex; flex-direction:column; padding:22px 16px 18px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:12px; padding:4px 8px 20px;}
.brand-mark{
  width:36px; height:36px; border-radius:10px; flex:none;
  background:linear-gradient(150deg,#2A2E36,#1D2026); border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; color:var(--gold);
}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:15.5px; color:#fff; line-height:1;}
.brand-sub{font-size:11px; color:rgba(255,255,255,.5); margin-top:4px; letter-spacing:.04em;}

/* carte d'info optionnelle dans la sidebar */
.side-card{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:15px 15px 14px; margin-bottom:20px;
}
.side-card .sc-label{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42);}
.side-card .sc-name{font-size:13.5px; font-weight:600; color:#EEF0EB; margin-top:8px; line-height:1.32;}
.side-card .sc-value{font-family:var(--font-display); font-weight:600; font-size:19px; color:#fff; margin-top:11px; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}

.nav{display:flex; flex-direction:column; gap:2px;}
.nav-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; border:none; background:none; border-radius:10px;
  color:rgba(255,255,255,.64); font-size:13.5px; font-weight:600; letter-spacing:.005em;
  transition:background .16s ease, color .16s ease;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:rgba(255,255,255,.10); color:#fff;}
.nav-item .ic-svg{width:18px; height:18px; opacity:.8; flex:none;}
.nav-item.active .ic-svg{color:var(--gold); opacity:1;}

.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column; gap:11px;}
.sync{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:rgba(255,255,255,.6);}
.logout-btn{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.12);
  border-radius:9px; padding:7px 11px; font-size:12px; font-weight:600; text-decoration:none;
}
.logout-btn:hover{background:rgba(255,255,255,.12); color:#fff;}

.main{flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; overflow:hidden;}
.topbar{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(20px,3vw,42px); border-bottom:1px solid var(--border); background:var(--canvas);
}
.topbar-left{display:flex; align-items:center; gap:14px;}
.crumb{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.page-title{font-size:23px; color:var(--ink); margin-top:4px;}
.topbar-actions{display:flex; gap:9px;}
.nav-toggle{display:none; background:var(--surface); border:1px solid var(--border-strong); color:var(--ink); border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center;}
.content{flex:1; overflow-y:auto; padding:28px clamp(20px,3vw,42px) 64px; scroll-behavior:smooth;}

/* ---- COMPOSANTS ---- */
.grid{display:grid; gap:18px;}
.kpis{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.cols-2{grid-template-columns:1fr 1fr;}
.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:1080px){.cols-2,.cols-3{grid-template-columns:1fr;}}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:22px 24px; box-shadow:var(--sh);}
.card.pad-lg{padding:26px;}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px;}
.card-head h3{font-size:16px; color:var(--ink);}
.card-note{font-size:12px; font-weight:500; color:var(--ink-3);}

.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 20px 18px; box-shadow:var(--sh); transition:transform .16s ease, border-color .16s ease;}
.kpi:hover{transform:translateY(-2px); border-color:var(--border-strong);}
.kpi-label{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);}
.kpi-value{font-family:var(--font-display); font-weight:600; font-size:29px; letter-spacing:-.022em; color:var(--ink); margin-top:13px; font-variant-numeric:tabular-nums; line-height:1;}
.kpi-sub{font-size:12.5px; font-weight:500; color:var(--ink-2); margin-top:9px; font-variant-numeric:tabular-nums;}
.kpi.ink .kpi-value{color:var(--primary);}
.kpi.accent .kpi-value{color:var(--gold-deep);}

/* tables */
table.data{width:100%; border-collapse:collapse; font-size:13.5px; font-weight:500;}
table.data th{text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:0 12px 11px; border-bottom:1px solid var(--border);}
table.data td{padding:11px 12px; border-bottom:1px solid var(--border); color:var(--ink); vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data td.r,table.data th.r{text-align:right; font-variant-numeric:tabular-nums;}
table.data tr.total td{font-weight:700; border-top:1.5px solid var(--border-strong); border-bottom:none; color:var(--ink);}
table.data tr.sub td{font-weight:600; color:var(--primary);}
table.data tbody tr:hover td{background:var(--surface-2);}
table.data tr.total:hover td,table.data tr.sub:hover td{background:transparent;}
.dot{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:9px; vertical-align:baseline;}

/* badge "à confirmer" — point corail, pas d'emoji */
.badge-est{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-deep); margin-left:8px; white-space:nowrap;}
.badge-est::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none;}

/* pills */
.pill{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; border-radius:7px; padding:4px 9px;}
.pill.ok{background:var(--surface-2); color:var(--ink); border:1px solid var(--border-strong);}
.pill.warn{background:#FEF1EF; color:var(--gold-deep);}

/* notes éditoriales */
.note{background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:16px 18px; font-size:13px; line-height:1.62; color:var(--ink-2);}
.note .note-tag{display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:7px;}
.note b{color:var(--ink); font-weight:700;}
.note.warn{background:#FEF6F4; border-color:var(--coral-soft);}
.note.warn .note-tag{color:var(--gold-deep);}

/* champs */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:15px;}
.field label{font-size:11.5px; font-weight:600; color:var(--ink-2); display:flex; align-items:center;}
.field input,.field select,.field textarea{border:1px solid var(--border-strong); border-radius:10px; padding:9px 12px; font-size:13.5px; font-weight:500; color:var(--ink); background:var(--surface); font-variant-numeric:tabular-nums; transition:border-color .15s, box-shadow .15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(237,88,71,.16);}
.field .hint{font-size:11px; color:var(--ink-3);}
.fields-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 20px;}
.edit-table input,.edit-table select{width:100%; border:1px solid var(--border); border-radius:8px; padding:7px 8px; font-size:13px; background:var(--surface);}
.edit-table input:focus,.edit-table select:focus{outline:none; border-color:var(--accent);}
.edit-table td{padding:6px 6px;}

/* boutons */
.btn{display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; border-radius:10px; padding:9px 15px; font-size:13px; font-weight:600; letter-spacing:.005em; transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;}
.btn:active{transform:scale(.975);}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--coral-50);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--ink-3);}
.btn-soft{background:var(--surface-2); color:var(--ink); border-color:var(--border-strong);}
.btn-soft:hover{background:#EFEBE0;}
.btn-danger{background:transparent; color:var(--neg); border-color:var(--border);}
.btn-danger:hover{background:rgba(176,83,58,.08); border-color:rgba(176,83,58,.32);}
.btn-sm{padding:6px 10px; font-size:12px; border-radius:8px; gap:5px;}
.ic-svg{width:16px; height:16px; flex:none;}
.btn-icon{padding:6px; width:30px; height:30px; justify-content:center;}

/* divers */
.section-title{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin:32px 0 16px; display:flex; align-items:center; gap:14px;}
.section-title::after{content:""; flex:1; height:1px; background:var(--border);}
.empty{padding:28px; text-align:center; color:var(--ink-3); font-size:13px;}
.muted{color:var(--ink-2);} .small{font-size:12px;}
.flex{display:flex;} .between{justify-content:space-between;} .center{align-items:center;}
.gap8{gap:8px;} .gap12{gap:12px;} .wrap{flex-wrap:wrap;}
.mt8{margin-top:10px;} .mt16{margin-top:16px;} .mb12{margin-bottom:12px;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* toast avec action optionnelle (undo) */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#F3F1EA; padding:12px 18px; border-radius:11px; font-size:13px; font-weight:500; box-shadow:0 12px 32px -8px rgba(28,36,32,.4); opacity:0; pointer-events:none; transition:all .3s ease; z-index:300; display:flex; align-items:center; gap:12px;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.toast-undo{background:none; border:1px solid rgba(255,255,255,.3); color:#F3F1EA; border-radius:6px; padding:3px 9px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;}
.toast-undo:hover{background:rgba(255,255,255,.12);}
.toast-msg{flex:1;}

/* panneaux (1 par onglet) */
.panel{display:none; animation:fade .34s cubic-bezier(.22,1,.36,1);}
.panel.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---- RESPONSIVE ---- */
@media(max-width:820px){
  .sidebar{position:fixed; left:0; top:0; z-index:200; transform:translateX(-100%); transition:transform .26s cubic-bezier(.22,1,.36,1); box-shadow:0 0 40px rgba(0,0,0,.3);}
  .app.nav-open .sidebar{transform:none;}
  .app.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(11,11,11,.4); z-index:150;}
  .nav-toggle{display:inline-flex;}
  .kpis{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){.kpis{grid-template-columns:1fr;} .topbar-actions .btn span:not(.ic-svg){display:none;}}