/* ===========================================================
   Revicard, back-office : jetons et primitives
   Source : docs/DESIGN-SYSTEM-ADMIN.md et les maquettes de
   docs/source/maquettes-admin/. Ces valeurs sont la cible
   verrouillee : on les reproduit, on ne les reinvente pas.
   =========================================================== */
@import url("./polices.css");

:root{
  /* Structure et marque */
  --navy:#0C1E3C;
  --navy-2:#12294D;
  --royal:#2B50E2;
  --royal-soft:#4E72F5;
  --lavender:#B7B1EA;

  /* Encres */
  --ink:#0C1E3C;
  --ink-2:#3B4A66;
  --ink-3:#6C7A96;

  /* Semantiques, discrets, jamais criards */
  --ok:#128A5E;      --ok-tint:rgba(18,158,106,.14);
  --draft:#A66B10;   --draft-tint:rgba(186,117,23,.15);
  --danger:#D0463B;  --danger-tint:rgba(208,70,59,.13);

  /* Priorites de fiche */
  --p1:#2B50E2; --p2:#5B76E8; --p3:#8E9BC4; --p4:#B4BDD3;

  /* Verre visionOS */
  --glass-light:rgba(255,255,255,.55);
  --glass-light-2:rgba(255,255,255,.68);
  --glass-dense:rgba(255,255,255,.72);   /* std calibre borne haute, sous les tableaux */
  --glass-stroke:rgba(255,255,255,.65);
  --glass-spec:inset 0 1px 0 rgba(255,255,255,.85);
  --glass-inner:inset 0 0 0 1px rgba(255,255,255,.22);
  --blur:saturate(180%) blur(26px);
  --blur-strong:saturate(190%) blur(40px);

  /* Ombres, toujours en deux couches */
  --shadow-soft:0 10px 34px -12px rgba(12,30,60,.30), 0 3px 10px -4px rgba(12,30,60,.14);
  --shadow-panel:0 22px 60px -22px rgba(12,30,60,.42), 0 6px 18px -8px rgba(12,30,60,.18);

  --radius:20px;
  --radius-sm:13px;

  --fd:'Bricolage Grotesque',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.75,.25,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--fb);color:var(--ink);
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{stroke-width:1.7}

/* ------------------------------------------------- le fond vif */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60% 55% at 78% -6%,#C9C3F4 0%,rgba(201,195,244,0) 60%),
    radial-gradient(52% 50% at 4% 8%,#6E8CFF 0%,rgba(110,140,255,0) 58%),
    radial-gradient(70% 60% at 96% 88%,#4E72F5 0%,rgba(78,114,245,0) 55%),
    radial-gradient(80% 70% at 20% 100%,#A9B6EC 0%,rgba(169,182,236,0) 60%),
    linear-gradient(150deg,#EAEEF9 0%,#DCE3F5 40%,#E7E4F7 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.5),rgba(255,255,255,0) 45%);
  opacity:.9;
}

/* ------------------------------------------------- l'echelle de verre
   Deux niveaux seulement. Le niveau dense a ete ecarte : sous les grands
   tableaux on garde glass-std, simplement calibre vers sa borne haute. */
.glass-airy{
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.26));
  -webkit-backdrop-filter:saturate(190%) blur(30px);backdrop-filter:saturate(190%) blur(30px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--shadow-panel),inset 0 1px 0 rgba(255,255,255,.7);
}
.glass-std{
  background:var(--glass-light-2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-stroke);
  box-shadow:var(--shadow-panel),var(--glass-spec),var(--glass-inner);
}
.glass-std.dense{background:var(--glass-dense)}

/* ------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 17px;border-radius:var(--radius-sm);
  font-family:inherit;font-weight:550;font-size:13.5px;
  border:1px solid transparent;transition:.16s var(--ease);
}
.btn svg{width:16px;height:16px;stroke-width:2}
.btn-primary{
  background:linear-gradient(135deg,var(--royal),var(--royal-soft));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 22px -7px rgba(43,80,226,.6);
}
.btn-primary:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 28px -8px rgba(43,80,226,.7)}
.btn-ghost{
  background:rgba(255,255,255,.55);color:var(--ink);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--glass-spec),0 4px 12px -5px rgba(12,30,60,.18);
}
.btn-ghost:hover{border-color:var(--lavender);color:var(--royal)}
.btn:focus-visible{outline:2px solid var(--royal);outline-offset:2px}

/* ------------------------------------------------- filet de securite au clavier
   Ajoute le 17 aout 2026 pendant la passe de finition. Une verification par
   lecture des feuilles de style a montre que la moitie des elements cliquables
   du back-office n'avaient aucune regle de focus : bouton des preferences,
   recherche globale, boutons d'icone de la barre haute, pastilles de filtre,
   pagination, boutons de l'editeur de fiche. Au clavier, ils etaient invisibles.
   Cette regle de base les couvre tous. Les composants qui veulent un decalage
   particulier redefinissent ensuite, leur selecteur de classe l'emporte. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:2px solid var(--royal);outline-offset:2px;
}

/* ------------------------------------------------- pastilles et etats */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:11px;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.5);
  color:var(--ink-2);font-size:12.5px;font-weight:450;
  box-shadow:var(--glass-spec);transition:.16s;
}
.chip svg{width:14px;height:14px}
.chip:hover{border-color:var(--lavender);color:var(--royal)}
.chip.on{
  background:linear-gradient(180deg,#16305e,#0C1E3C);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 14px -6px rgba(12,30,60,.5);
}

.status{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
  font-size:11.5px;font-weight:550;border:1px solid transparent}
.status .d{width:6px;height:6px;border-radius:50%}
.status.pub{background:var(--ok-tint);color:var(--ok);border-color:rgba(18,158,106,.25)}
.status.pub .d{background:var(--ok)}
.status.dft{background:var(--draft-tint);color:var(--draft);border-color:rgba(186,117,23,.28)}
.status.dft .d{background:var(--draft)}

.prio{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11.5px;font-weight:600}
.prio .sq{width:8px;height:8px;border-radius:2.5px}
.prio.p1{color:var(--p1)} .prio.p1 .sq{background:var(--p1);box-shadow:0 0 0 3px rgba(43,80,226,.16)}
.prio.p2{color:var(--p2)} .prio.p2 .sq{background:var(--p2)}
.prio.p3{color:#6a7794}  .prio.p3 .sq{background:var(--p3)}
.prio.p4{color:#8b96af}  .prio.p4 .sq{background:var(--p4)}

/* les identifiants sont toujours visibles et toujours en mono */
.mono{font-family:var(--fm)}

/* libelle reserve aux lecteurs d'ecran */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.code-chip{
  font-family:var(--fm);font-size:10.5px;font-weight:500;
  background:rgba(255,255,255,.55);color:var(--ink-2);
  padding:2px 8px;border-radius:7px;border:1px solid rgba(255,255,255,.7);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}