/* KeePI — skin visuel BETA (temporaire).
 *
 * Reprise ciblee de la direction "graphite-violet" validee au design lab :
 * accent #5A4CE0, coque bleu nuit degradee, logo officiel, motif pixels violet
 * discret, navigation active nette, focus/liens coherents.
 *
 * Portee VOLONTAIREMENT etroite : ce fichier n'habille que la coque (sidebar,
 * en-tete mobile, logo) et la coherence focus/lien. La couleur d'accent des
 * boutons/liens/etats est reglee par le remap Tailwind `indigo` -> violet dans
 * base.html, sans toucher aux gabarits metier. Rien ici ne modifie la densite,
 * les formulaires ni les tableaux. Non canonique : a remplacer par la DA finale.
 */

:root {
  --keepi-accent: #5A4CE0;
  --keepi-accent-hover: #4A3CCB;
  --keepi-accent-soft: #EAE7FF;
  --keepi-focus-halo: 0 0 0 3px rgba(90, 76, 224, .30);
}

/* Espace de travail clair, legerement plus doux que slate-100. */
body.keepi-beta { background: #EEF1F5; }

/* ------------------------------- COQUE ---------------------------------- */
/* Degrade sobre ancre sur le bleu nuit existant, derivant vers un bleu-violet
 * en bas ou il rejoint le motif pixel. Aucune rupture, aucun noir absolu.
 * Contraste du texte de navigation excellent aux deux extremites. */
.keepi-sidebar {
  background: linear-gradient(180deg, #242936 0%, #212842 55%, #262A5A 100%);
  position: relative;
}

/* Navigation et bloc profil passent devant le motif. */
.keepi-sidebar > * { position: relative; z-index: 3; }
.keepi-sidebar .keepi-sidebar-pixels { z-index: 2; }

/* En-tete mobile : meme famille de bleu nuit que la coque. */
.keepi-topbar { background: #242936; }

/* ----------------------- NAVIGATION ACTIVE ------------------------------ */
/* Bloc violet doux + rail d'accent a gauche : etat actif nettement lisible,
 * sans le pave plein. Le violet reste la couleur de reperage. */
.keepi-nav.is-active {
  background: rgba(90, 76, 224, .24);
  color: #FFFFFF;
  box-shadow: inset 3px 0 0 0 var(--keepi-accent);
}

/* -------------------------- MOTIF PIXELS -------------------------------- */
/* Petit groupe de carres violets « qui s'echappent du logo », discret et en
 * bas de la coque. Elements reels (inspectables), positionnes en inline. */
.keepi-sidebar-pixels {
  position: absolute;
  left: 22px;
  bottom: 92px;
  width: 120px;
  height: 84px;
  pointer-events: none;
}
.keepi-sidebar-pixels span {
  position: absolute;
  display: block;
  background: #5A4CE0;
  border-radius: 1px;
  pointer-events: none;
}

/* ------------------------------- LOGO ----------------------------------- */
/* Sigle officiel detoure (fond transparent) : ses hachures laissent
 * transparaitre le degrade de la coque. Proportions d'origine conservees. */
.keepi-logo { display: block; width: 118px; height: auto; }

/* --------------------- FOCUS / LIENS COHERENTS -------------------------- */
/* Anneau de focus unifie sur l'accent, pour les controles clavier. Borne aux
 * elements interactifs : n'affecte ni la structure ni la densite. */
.keepi-beta a:focus-visible,
.keepi-beta button:focus-visible,
.keepi-beta input:focus-visible,
.keepi-beta select:focus-visible,
.keepi-beta textarea:focus-visible,
.keepi-beta [tabindex]:focus-visible {
  outline: 2px solid var(--keepi-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Sur la coque sombre, l'anneau passe en clair pour rester visible. */
.keepi-sidebar a:focus-visible,
.keepi-topbar a:focus-visible {
  outline-color: #A79BFF;
}

/* ---------------------- MARQUEUR DE TITRE (opt.) ------------------------ */
/* Petit trio de pixels reutilisable devant un titre de section, meme langage
 * graphique que le logo. Applique explicitement via la classe, jamais impose. */
.keepi-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
}
.keepi-section-title::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  display: block;
  background:
    linear-gradient(var(--keepi-accent) 0 0) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--keepi-accent) 0 0) 6px 6px / 4px 4px no-repeat,
    linear-gradient(#C9C2FF 0 0) 6px 0 / 4px 4px no-repeat;
}