/* ============================================================
   Sparkclip — theme
   Sombre uniquement, palette violet electrique -> corail.
   Charge apres style.css et espace.css, hors couches : ces regles l'emportent.
   ============================================================ */

@font-face {
  font-family: "Geist";
  src: url("static/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --voile: 255 255 255;
  --ombre: 0 0 0;
  --fort: #ffffff;
  --sur-fort: #0b0a12;
  --fond: #07060b;

  --violet: #7c5cff;
  --violet-clair: #a390ff;
  --corail: #ff6b6b;
  --ambre: #ffb547;
  --menthe: #3ddc97;
  --rouge: #ff5c6c;
  --degrade: linear-gradient(120deg, #7c5cff 0%, #b35cf0 52%, #ff6b6b 100%);
  --accent: #a390ff;
  --accent-2: #ff6b6b;

  /* Halos de fond : ce sont eux que le verre laisse transparaitre. */
  --tint-1: 252 100% 64%;
  --tint-2: 355 100% 66%;
  --tint-3: 285 90% 58%;
  --tint-4: 225 95% 60%;

  /* Verre teinte : jamais un gris neutre, toujours un voile violet/corail. */
  --verre: linear-gradient(150deg, rgba(163, 144, 255, 0.11) 0%, rgba(255, 255, 255, 0.035) 38%,
           rgba(255, 255, 255, 0.03) 62%, rgba(255, 107, 107, 0.075) 100%);
  --verre-fort: linear-gradient(150deg, rgba(163, 144, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 45%,
           rgba(255, 107, 107, 0.1) 100%);
  --reflet: linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(183, 168, 255, 0.3) 20%,
           transparent 44%, transparent 62%, rgba(255, 107, 107, 0.38));
  --menu-fond: rgba(16, 13, 26, 0.86);

  --glass-bg: rgba(163, 144, 255, 0.07);
  --glass-bg-strong: rgba(163, 144, 255, 0.11);
  --glass-bg-hover: rgba(163, 144, 255, 0.13);
  --glass-stroke: rgba(183, 168, 255, 0.14);
  --glass-stroke-hi: rgba(255, 255, 255, 0.28);

  --ink: #f5f3ff;
  --ink-2: #aca8c0;
  --ink-3: #8b86a1;

  --sidebar-w: 256px;
  --ecart: 12px;
  color-scheme: dark;
}

body {
  background: var(--fond);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.012em;
}
.aurora { opacity: 0.72; }

/* ================================================================ liquid glass */

.glass {
  background: var(--verre);
  border-color: var(--glass-stroke);
  backdrop-filter: blur(40px) saturate(210%);
  -webkit-backdrop-filter: blur(40px) saturate(210%);
}
.glass::before { background: var(--reflet); }
.glass-strong { background: var(--verre-fort); }
.btn { background: var(--glass-bg-strong); border-color: var(--glass-stroke); }
.btn:hover { background: var(--glass-bg-hover); }
.btn-ghost { background: transparent; border-color: transparent; }

/* Menus flottants : verre liquide, assez dense pour que la page ne se lise
   pas a travers. Ils vivent a la racine de la page, hors de tout parent en
   verre, pour que le flou voie vraiment ce qu'il y a dessous. */
.notif-panneau, .espace-menu, .choix-menu {
  position: fixed; z-index: 90;
  background: var(--verre), var(--menu-fond);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(34px) saturate(200%);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  box-shadow: var(--shadow-float), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

/* ================================================================ disposition */

#app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.sidebar { overflow: visible; }

.side-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px 12px 12px 20px;
}
.side-scroll { padding: 0 12px 12px; }

.av {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 11px; background: var(--degrade); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: -0.02em;
  box-shadow: 0 6px 16px -8px rgba(124, 92, 255, 0.8), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.av .ico { width: 16px; height: 16px; }
.av.tous { background: var(--glass-bg-strong); color: var(--ink); border: 1px solid var(--glass-stroke); box-shadow: 0 1px 0 var(--glass-stroke-hi) inset; }
.av.mini { width: 26px; height: 26px; border-radius: 8px; font-size: 11.5px; }
.menu-label {
  margin: 4px 2px 8px; font-size: 10.5px; font-weight: 620;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3);
}
.usage-barre { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: rgb(var(--voile) / 0.1); }
.usage-barre i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--degrade); transition: width 0.8s var(--ease); }

/* --- zone principale sans barre du haut --- */
.main { gap: 0; overflow: hidden; border-radius: var(--r-lg); }
.page-entete {
  display: flex; align-items: center; gap: 12px; flex: none;
  min-height: 70px; padding: 16px 24px 4px;
}
.page-titres { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.page-titre {
  margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-sous { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-entete #crumb { min-width: 0; }
.page-entete #crumb > strong { font-size: 21px !important; font-weight: 650; letter-spacing: -0.035em; }
.content { padding: 8px 24px 26px; border-radius: 0; background: none; border: 0; box-shadow: none; }
.main:has(> .content.content-editeur) .page-entete { display: none; }
.content.content-editeur { padding: 0; }

/* --- pages en colonnes : la largeur de l'ecran sert --- */
.page, .page-grille { max-width: 1320px; margin: 0 auto; }
.page-grille {
  width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--ecart); align-items: stretch;
}
.page-grille > .pleine { grid-column: 1 / -1; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--ecart); }
.grille-cartes > .connexion { margin: 0; height: 100%; }
.liste-modeles { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
.liste-decouverte { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); }
.liste-chaines { grid-template-columns: repeat(auto-fill, minmax(620px, 1fr)); align-items: start; }
.grille-2 { gap: var(--ecart); margin-bottom: var(--ecart); }

/* ================================================================ accents */

.btn-primary {
  color: #fff; background: var(--degrade); border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 12px 30px -14px rgba(124, 92, 255, 0.85);
}
.btn-primary:hover { background: var(--degrade); filter: brightness(1.08); }

.seg { background: var(--glass-bg); border-color: var(--glass-stroke); }
.seg button.on {
  color: #fff; background: var(--degrade);
  box-shadow: 0 6px 16px -8px rgba(124, 92, 255, 0.85), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.chip { background: var(--glass-bg); border-color: var(--glass-stroke); }
.chip.on {
  color: var(--ink); background: rgba(124, 92, 255, 0.18);
  border-color: rgba(163, 144, 255, 0.65); box-shadow: none;
}
.style-card.on, .layout-card.on { border-color: rgba(163, 144, 255, 0.75); }
.onglets button.on { color: #fff; background: var(--degrade); }
.hook.on { color: var(--ink); border-color: rgba(163, 144, 255, 0.6); background: rgba(124, 92, 255, 0.13); }
.hook.on .hook-dot { background: var(--degrade); border-color: transparent; box-shadow: none; }
.progress-fill { background: linear-gradient(90deg, #7c5cff, #ff6b6b, #7c5cff); background-size: 200% 100%; box-shadow: 0 0 20px rgba(124, 92, 255, 0.45); }
.spinner { border-top-color: var(--violet-clair); }
.switch-row input[type="checkbox"]:checked { background: var(--degrade); border-color: transparent; }

.nav-item.on {
  color: var(--ink); background: rgba(124, 92, 255, 0.16);
  border-color: rgba(163, 144, 255, 0.3); box-shadow: 0 1px 0 var(--glass-stroke-hi) inset;
}
.nav-item.on .ico { color: var(--violet-clair); }
.nav-badge, .notif-pastille, .pill-fort { background: var(--degrade); color: #fff; }

.dot.ok { background: var(--menthe); box-shadow: 0 0 9px rgba(61, 220, 151, 0.7); }
.dot.err { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rouge); }
.dot.attente { background: var(--ambre); box-shadow: 0 0 9px rgba(255, 181, 71, 0.6); }
.toast.ok { border-color: rgba(61, 220, 151, 0.5); }
.toast.err { border-color: rgba(255, 92, 108, 0.6); }
.erreur-txt, .clip-state.err { color: var(--rouge); }

.tuile b, .dec-score b, .stat-chiffres b {
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dec-score { background: rgba(124, 92, 255, 0.14); }
.barre-mini i { background: var(--degrade); }
.courbe { color: var(--violet-clair); }
.chaleur i[style] { background: rgba(124, 92, 255, var(--a)); }
.interrupteur i { background: rgb(var(--voile) / 0.16); }
.interrupteur input:checked + i { background: var(--degrade); }
.interrupteur input:checked + i::after { background: #fff; transform: translateX(16px); }
.etape.faite .etape-coche { background: var(--menthe); border-color: var(--menthe); color: #06140d; }
.val-vignette.on, .val-vignette:hover { border-color: var(--violet-clair); }
.val-actions .val-non:hover { border-color: rgba(255, 92, 108, 0.6); color: var(--rouge); }
.bloc-urgent { border-color: rgba(255, 181, 71, 0.5); }
.video-ligne.explose { background: rgba(255, 107, 107, 0.09); }

/* etats de publication */
.cb-etat.etat-publie { background: var(--menthe); color: #06140d; }
.cb-etat.etat-a_valider { background: rgba(255, 181, 71, 0.95); color: #1d1300; }
.cb-etat.etat-programme { background: rgba(124, 92, 255, 0.92); color: #fff; }
.cb-etat.etat-pret { background: rgba(255, 255, 255, 0.9); color: #0b0a12; }
.cb-etat.etat-rejete { background: rgba(255, 92, 108, 0.88); color: #fff; opacity: 1; text-decoration: none; }
.cal-jour { border-color: var(--glass-stroke); background: var(--glass-bg); }
.cal-jour.auj { border-color: rgba(163, 144, 255, 0.6); background: rgba(124, 92, 255, 0.09); }
.cal-creneau.du { border-color: var(--ambre); }
.cal-creneau.du .cal-etat { color: var(--ambre); }
.cal-creneau.publie .cal-etat { color: var(--menthe); }
.cal-creneau.erreur .cal-etat { color: var(--rouge); }

/* ================================================================ ecrans etroits */

@media (max-width: 1080px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { display: flex !important; flex-direction: column; }
  .side-tete { padding: 12px 10px 8px 16px; }
  .side-actions, .side-pied { display: none; }
  .side-scroll { padding: 0 8px 8px; }
  .notif-panneau { left: 10px !important; right: 10px; width: auto; top: 64px !important; }
  .page-entete { flex-wrap: wrap; min-height: 0; padding: 14px 16px 6px; }
  .content { padding: 8px 16px 20px; }
  .page-grille, .grille-cartes, .liste-modeles, .liste-decouverte, .liste-chaines { grid-template-columns: 1fr; }
}