/* =========================
   THEME FOURNI (inchangé sauf titre)
   ========================= */
:root{
  --accent: #2563eb;
  --accent-600: #2563eb;
  --accent-200: color-mix(in srgb, var(--panel) 85%, var(--accent) 10%);
  

  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #ebebeb;
  --text: #0f172a;
  --textNeg: #ffffff;
  --muted: #667085;
  --border: #e6e8ee;
  --hover: #f2f4f7;
  --success: #1aaa7f ;
  --success-200: color-mix(in srgb, var(--panel) 85%, var(--success) 10%) ;
  --success-300: color-mix(in srgb, var(--panel) 85%, var(--success) 30%) ;
  --warning: #df6763 ;
  --warningBirth: #ffdada;
  --info: #070708 ;
  --document: #3469ad ;

  

  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --radius: 12px;
  --header-h: 56px;

  --shadow-soft: 0 1px 4px rgba(16,24,40,.06);
  --shadow-pop:  0 12px 28px rgba(16,24,40,.10);

  /* Timeline sizing */
  --dayW: 24px;
  --gap: 6px;
  --padX: 16px;
}

:root.dark{
  --bg: #0b0c10;
  --panel: #0f1116;
  --panel-2: #474747;
  --text: #e7ecf3;
  --textNeg: #0f172a;
  --muted: #9aa6ba;
  --border:#353c4d;
  --hover:#121726;
}

/* Respect système si autothème */
@media (prefers-color-scheme: dark){
  :root[data-autotheme="system"]{ color-scheme: dark; }
  :root[data-autotheme="system"]{
    --bg:var(--bg); --panel:#0f1116; --text:#e7ecf3; --muted:#9aa6ba; --border:#1a2130; --hover:#121726;
  }
}

/* Réduction motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html, body { height: auto; min-height: 100%; }

body{
  margin:0;
  background: var(--panel);
  color: var(--text);
  font: 14px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none }


.accent { 
  color: var(--accent) !important; 
}

/* === Scrollbar globale de l'application === */
html, body, #appRoot {
  scrollbar-color: var(--accent) var(--panel); /* Firefox */
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--panel);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
  border: 2px solid var(--panel); /* léger contour pour l'intégration */
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 80%, white);
}





/* Progress bar */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, white));
  transform-origin:left center; transform:scaleX(0); transition:transform .25s ease; z-index:1002;
}

/* ===== Header & Nav ===== */
.header{
  position:sticky; top:0; z-index:1000; height:var(--header-h);
  background:var(--panel); 
  padding-top: env(safe-area-inset-top, 0px);
}
.header .inner{
  max-width:1800px; margin:0 auto; height:var(--header-h);
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:0 16px;
}


.logoCircle{
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent);
}
.logoCircle img{ width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1); margin-top: 1px;}



.logoCircleLoader{
  width:100px; height:100px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.05);
}
.logoCircleLoader img{ width:100px; height:100px; object-fit:contain; filter:brightness(0) invert(1); }


/* Si le thème actif est sombre */
:root.dark .logoCircle img {   filter:brightness(1) invert(1); }
:root.dark .logoCircleLoader img{   filter:brightness(1) invert(1); }





h3 {
    display: flex;
    gap: 10px;
}
h2 .lucide {
  color: var(--accent);
}

/* Nav + ink bar + edge fade */
.navwrap{
  position:relative; 
  overflow:auto hidden; 
  margin: 0 auto;
}
.nav{ 
  position:relative; 
  display:flex; 
  align-items:center; 
  gap:4px; 
  min-width:max-content; 
}
.nav a{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; color:var(--text);  white-space:nowrap; outline:none;
}
.nav a .lucide {
  height: 16px;
  width: 16px;
}
.nav a:hover{ 
  background:var(--hover); 
}
.nav a[aria-current="page"]{ 
  color:var(--accent); 
  font-weight:600; 
}
.ink {
  position:absolute; height:2px; left:12px; width:20px; bottom:4px; border-radius:2px;
  background:var(--accent); transition:transform .22s ease, width .22s ease, left .22s ease; pointer-events:none;
}

/* Icônes monochromes */
.ico{ width:18px; height:18px; display:inline-block; color:currentColor; }
.ico svg{ width:100%; height:100%; stroke:var(--textNeg); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }


/* Actions */
.actions { 
  display:flex; 
  align-items:center; 
  gap:8px;
  position:relative;
  justify-content: flex-end; 
}


h4 .lucide,
h3 .lucide  {
  color: var(--accent);
}

/* =========================
    --- GLOBAL CARD  ---
   ========================= */


.card {
  
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1rem;
}


/* Base Responsive */
@media (max-width: 600px){


  .main { 
    padding: 0 !important;
  }
  .actions{ 
    position:absolute; 
    top: 10px; 
    right: 16px; 
  }


  .card {
    border:0;
    box-shadow: none;
    padding: 1rem 0;
  }

}



/* Gros Bouttons Principaux */







.iconbtn{
  width:36px; height:36px; border-radius:10px; border:0;
  background:transparent; color:var(--text); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.iconbtn:hover{ background:var(--hover); }
.iconbtn:focus-visible{ outline:none; box-shadow:var(--ring); }
.icon{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }


/* Tooltips & popovers */

.tooltip{ 
  position:relative;     
  position: relative;
  display: flex;
  align-items: center;
}

.tooltip[data-show]::after{
  content:attr(aria-label); position:absolute; top:calc(100% + 8px); right:0; white-space:nowrap;
  background:#111827; color:var(--textNeg); font-size:12px; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
}
.pop{
  position:absolute; top:calc(100% + 10px); right:0; min-width:300px;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:6px; z-index:1001; box-shadow:var(--shadow-pop);
}
.pop.hidden{ display:none; }
.pop .group{ padding:8px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.pop .rowAccount{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px; border-radius:8px; }
.pop .rowAccount:hover{ background:var(--hover); }
.pop .link{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; color:var(--text); }
.pop .link:hover{ background:var(--hover); }

.pop .link .lucide{ color:var(--accent); }


/* Switch */
.switch{
  --w:44px; --h:24px; position:relative; width:var(--w); height:var(--h);
  border-radius:999px; background:var(--accent); border:1px solid var(--border);
}

.switch input{ appearance:none; position:absolute; inset:0; margin:0; cursor:pointer; }
.knob{ position:absolute; top:1px; left:0px; width:20px; height:20px; border-radius:50%; background:var(--panel); transition:transform .18s ease; cursor: pointer; }
.switch input:checked + .knob{ transform:translateX(calc(var(--w) - 22px)); }

/* Accent swatches */
.swatches{ display:flex; gap:6px; flex-wrap:wrap }
.sw{ width:18px; height:18px; border-radius:50%; border:1px solid var(--border); cursor:pointer; }

/* Mobile sheet */
/* Mobile sheet */
.burger { display:none; }

@media (max-width: 900px){
  .navwrap { display:none; }
  .burger { display:grid; }
}

.sheet {
  position: fixed;
  inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
  background: var(--panel);
  border-top: 1px solid var(--border);
  display: none;
  z-index: 1000;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(-10px);      /* léger décalage vers le haut */
  transition: all 0.25s ease;        /* animation douce */
}

.sheet.open {
  display: block;
  opacity: 1;
  transform: translateY(0);          /* revient à sa position */
}

.sheet .list {
  display: grid;
  gap: 6px;
  padding: 20px 12px;
}

.sheet .list a {
  padding: 10px;
  color: var(--text);
  display: flex;
  gap: 10px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.sheet .list a:hover {
  background: var(--hover);
  color: var(--accent);
}

.sheet .list a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

.sheet .list a .lucide {
  color: var(--accent);
  width: 22px;
  height: 22px;
}



.main{ 
  max-width:1800px; 
  margin:20px auto; 
  padding:0 16px; 
  position: relative; 
}


.hero{ padding:14px; }
.hero h1{ margin:0 0 4px; font-size:20px; font-weight:650 }
.hero p{ margin:0; color: var(--muted) }

/* =========================
   TOOLBAR PROJETS (fusion)
   ========================= */
.toolbar{
  position:sticky; top:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  z-index:900; background:var(--panel); border-bottom:1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.toolbar .inner{
  max-width:1800px; margin:0 auto; padding:8px 20px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  justify-content: space-between;
}



.search{ position:relative; display:flex; align-items:center; gap:8px; }
.search > span{ font-size:14px; color:var(--muted); }
.toolbar .search{ flex:1; display:flex; align-items:center; gap:8px; }

.search .ico{ width:18px; height:18px; flex-shrink:0; color:var(--muted); }
.search input{
  height:36px; flex:1; border:1px solid var(--border); border-radius:10px; padding:0 10px;
  background:var(--panel); color:var(--text); outline:none;
}
.toolbar .search input{ width:100%; min-width:120px; background: var(--bg); }
.search input:focus{ box-shadow: var(--ring); border:1px solid var(--accent); }


/*.group{ display:flex; align-items:center; gap:8px; }*/

.btn, .btn-secondary, .btn-warning {
  padding:10px 16px; border-radius: 6px; cursor:pointer;  transition: all 0.2s;
}
.btn .lucide, .btn-secondary .lucide, .btn-warning .lucide {
      width: 16px;
    height: 16px;
}
.btn{
  background:var(--accent); color:var(--textNeg); border:none;
}
.btn:hover{ filter:brightness(1.05); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.btn-secondary{
  background:transparent; border:1px solid var(--border) !important; color:var(--text);
  display:flex; align-items:center; gap:10px; 
}
.btn-secondary:hover, .btn-secondary.active{ background:var(--hover);  border-color: var(--accent); }


.btn-warning{
  background:transparent; border:1px solid var(--warning) !important; color:var(--warning);
  display:flex; align-items:center; gap:10px; 
}


.tab.btn-secondary:hover,
.btn-secondary:hover { 
  background:var(--hover); 
}




/* Titre + icônes dans toolbar */
.title{
  display:flex; 
  align-items:center; 
  gap:10px;
  letter-spacing:.3px; 
  color:var(--text); 
  margin-right:4rem;   
  font-size:clamp(25px, 4vw, 27px);
}

.title .ico{ 
  width:22px; 
  height:22px; 
  color:var(--accent); 
  flex-shrink:0; }


.titleRow {
    display:flex; 
    align-items:center; 
    gap:10px;
    letter-spacing:.3px; 
    color:var(--text); 
    margin-right:4rem; 
    flex: 1
}



  





@keyframes fadeIn { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeOut { to {opacity:0; transform:translateY(20px);} }





/* Dark tweak (optionnel) */
:root.dark .g-ico,
:root.dark .qa-icon {
  background: color-mix(in oklab, var(--accent) 26%, transparent);
}



.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-weight: 600;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--textNeg);
  transition: background .2s, box-shadow .2s;
}
.btn .ico {
  width: 16px;
  height: 16px;
}
.btn:hover {
  background: var(--accent-600);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}






/* Header */
.modal-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--elev);
}
.modal-hd h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.btn-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.btn-close:hover {
  color: var(--accent);
  background: var(--hover);
}
.btn-close .ico { width: 20px; height: 20px; }

/* Body */
.modal-bd { padding: 20px; }
.grid-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Footer */
.modal-ft {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--elev);
  text-align: right;
}






/* Champs */
.ligne-champs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.champ-flex {
  flex: 1;
  display: grid;
  gap: 6px;
}
.champ-flex label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.champ-flex input,
.champ-flex select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.champ-flex input:focus,
.champ-flex select:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}



/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


.dot-accent {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #6ea8fe); /* ta couleur accent */
  margin-right: 6px;
  vertical-align: middle;
}








 .actionsList {
    display: flex; 
    gap: 16px;
  }

 @media (max-width: 600px){ 

  .popover-wrapper{ margin-right:0; }

 
   .actionsList {
    position: relative;
        justify-content: flex-end;
    width: 100%;
  }

  .title {
    width: 100%;
    padding-right: 0
  }

}



.kpi-grid{
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:12px;
  margin-top:20px;
}
.kpi{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  text-align:center;
}
.kpi .label{ 
  color:var(--muted); 
  font-size:12px; 
  text-transform:uppercase; 
  letter-spacing:.04em; 
}
.kpi .val{ 
  font-size:16px; 
  font-weight:700; 
  margin-top:4px; 
  color:var(--text); 
}




.client-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  max-width: 100%;
}


/* que ce soit #globalLoader, .app-loader, .loader-overlay, adapte le sélecteur */
#globalLoader,
.app-loader,
.loader-overlay {
  pointer-events: none;
}










/* Select Couleurs Theme */

.swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sw {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--panel), #000 20%);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sw:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.sw.active {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}




/* 🔧 Personnalisation du fond des champs autofill (Chrome / Edge / Safari) */
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--bg) inset !important;  /* 👈 remplace le fond bleu */
  -webkit-text-fill-color: var(--text) !important;       /* 👈 couleur du texte */
  transition: background-color 9999s ease-in-out 0s;     /* évite le flash jaune */
}

/* ✅ Optionnel : bordure accentuée au focus + autofill */
input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--bg) inset, 0 0 0 2px var(--accent) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* 🔄 Pour Firefox (effet plus discret) */
input:autofill,
select:autofill,
textarea:autofill {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}





.noBorder { 
  border: 1px solid transparent !important;
  background: transparent !important;
}



.artiste-logo-box{
    background: var(--accent);
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    width: 90px;
    margin-bottom: 20px;
}

.artiste-logo-img{
    max-height: 90px;
    max-width: 90px;
    object-fit: contain;
    display: block;
}

.logo-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
#logoFilename{
  font-size:12px;
  opacity:.75;
}
.artiste-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  overflow: hidden; /* important pour circle */
}

.artiste-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* garde le logo entier */
}

.artiste-avatar-initial {
  display: inline-block;
  width: 100%;
  text-align: center;
}


.val-multiline {
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}











.artist-chip .dot{
  width:10px;height:10px;border-radius:50%;
  background: var(--chip-color, rgba(0,0,0,.25));
}

.artist-chip.active{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  background: rgba(0,0,0,.03);
}

.artist-chip .count{
  opacity:.65;
  font-size:.8em;
}