/* ==========================================================================
   LDS-IT TICKETING — feuille de style unique de l'application.

   La charte est celle de LDS SecureLink : mêmes polices, mêmes violets, même
   fond d'aurores et de losanges flottants. Les deux outils doivent se
   reconnaître au premier coup d'œil.

   La grille neutre (fonds, bordures, textes) est fixe et reprend les valeurs
   exactes de SecureLink. Seul l'accent est réglable : il dérive d'une seule
   teinte, --h, dont la valeur par défaut 282 reproduit toute la gamme violette
   de la marque (#ab55cf, #9138b8, #d9a6ef…). Changer --h recolore l'ensemble
   sans jamais désaccorder les surfaces.
   ========================================================================== */

/* ========================================================================== */
/*  1. POLICES                                                                */
/* ========================================================================== */

/* Hébergées localement, comme sur SecureLink : aucune requête vers un tiers,
   donc aucune adresse IP transmise à un service externe (RGPD/CNIL). */

@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ========================================================================== */
/*  2. JETONS                                                                 */
/* ========================================================================== */

:root {
  /* Teintes. 282 = le violet LDS ; 251 = l'indigo du second point de dégradé. */
  --h: 282;
  --h2: 251;

  /* Gamme d'accent — reproduit exactement les --purple-* de SecureLink. */
  --purple-100:  hsl(var(--h) 75% 93%);   /* #f1e0fb */
  --purple-300:  hsl(var(--h) 70% 79%);   /* #d9a6ef */
  --purple-400:  hsl(var(--h) 65% 69%);   /* #c07de3 */
  --accent:      hsl(var(--h) 56% 57%);   /* #ab55cf — le violet de signature */
  --accent-600:  hsl(var(--h) 53% 47%);   /* #9138b8 */
  --accent-700:  hsl(var(--h) 55% 37%);   /* #712a92 */
  --accent-2:    hsl(var(--h2) 100% 68%); /* #7a5cff */
  --accent-glow: hsl(var(--h) 56% 57% / .45);

  --grad:   linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-2: linear-gradient(90deg, var(--accent), var(--accent-2), var(--purple-300));

  --radius:     12px;
  --radius-sm:  9px;
  --radius-lg:  18px;
  --sidebar-w:  256px;
  --topbar-h:   64px;

  --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Inter", "Segoe UI", sans-serif;
  --mono:         "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --fast: .16s var(--ease);
  --med:  .28s var(--ease);
}

/* -------------------------------- Sombre --------------------------------- */
/* Valeurs reprises telles quelles de SecureLink : c'est la même application
   vue par l'utilisateur, elle doit avoir exactement le même grain. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0c0713;
  --bg-soft:   #140b20;
  --surface:   #180f28;
  --surface-2: #1f1433;
  --surface-3: #2a1c44;
  --solid:     #1a1029;                  /* fond opaque : modales, popovers */
  --glass:     rgba(18, 10, 31, .82);

  --line:        #271a3a;
  --line-strong: #35234c;

  --dark:      #f7f1fd;                  /* couleur des titres (nom historique) */
  --text:      #f3ecfa;
  --text-soft: #cdbcdf;
  --muted:     #b7a3cc;
  --faint:     #7c6893;

  --sidebar-bg:  rgba(18, 10, 31, .72);
  --sidebar-txt: #b7a3cc;

  --accent-soft: hsl(var(--h) 56% 57% / .14);
  --accent-edge: hsl(var(--h) 56% 57% / .34);

  --violet:  var(--purple-300); --violet-soft:  hsl(var(--h) 56% 57% / .15); --violet-edge:  hsl(var(--h) 56% 57% / .35);
  --amber:   #f5a623;          --amber-soft:   rgba(245, 166, 35, .13);      --amber-edge:   rgba(245, 166, 35, .35);
  --fuchsia: #ef7fd0;          --fuchsia-soft: rgba(239, 127, 208, .12);     --fuchsia-edge: rgba(239, 127, 208, .32);
  --green:   #35d399;          --green-soft:   rgba(53, 211, 153, .12);      --green-edge:   rgba(53, 211, 153, .35);
  --slate:   #9d8bb3;          --slate-soft:   rgba(124, 104, 147, .16);     --slate-edge:   rgba(124, 104, 147, .38);
  --red:     #ff5c7a;          --red-soft:     rgba(255, 92, 122, .12);      --red-edge:     rgba(255, 92, 122, .35);
  --blue:    var(--accent-2);  --blue-soft:    hsl(var(--h2) 100% 68% / .13); --blue-edge:   hsl(var(--h2) 100% 68% / .35);

  --shadow:    0 14px 34px -18px rgba(90, 20, 130, .5);
  --shadow-lg: 0 24px 70px -24px rgba(90, 20, 130, .55);
  --glow:      0 0 0 1px var(--accent-edge), 0 14px 40px -14px var(--accent-glow);
}

/* --------------------------------- Clair --------------------------------- */
/* SecureLink n'existe qu'en sombre ; ce thème est un supplément de cet outil,
   accordé à la même gamme violette. Les surfaces creusées y sont plus sombres
   que la carte qui les porte — l'inverse exact du thème sombre. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #f4f1fa;
  --bg-soft:   #ece6f6;
  --surface:   #ffffff;
  --surface-2: hsl(var(--h) 44% 97%);
  --surface-3: hsl(var(--h) 40% 93%);
  --solid:     #ffffff;
  --glass:     rgba(255, 255, 255, .86);

  --line:        hsl(var(--h) 30% 88%);
  --line-strong: hsl(var(--h) 28% 78%);

  --dark:      #2a0f3d;
  --text:      #2c1f3d;
  --text-soft: #4e3f63;
  --muted:     #6f6086;
  --faint:     #9a8bb0;

  --sidebar-bg:  rgba(255, 255, 255, .72);
  --sidebar-txt: #55476b;

  --accent:      hsl(var(--h) 52% 45%);
  --accent-600:  hsl(var(--h) 55% 38%);
  --accent-soft: hsl(var(--h) 56% 57% / .12);
  --accent-edge: hsl(var(--h) 45% 60% / .38);

  --violet:  hsl(var(--h) 52% 45%); --violet-soft:  hsl(var(--h) 56% 57% / .12); --violet-edge: hsl(var(--h) 45% 60% / .34);
  --amber:   #b06a05;               --amber-soft:   rgba(245, 166, 35, .16);     --amber-edge:  rgba(245, 166, 35, .4);
  --fuchsia: #b02a8c;               --fuchsia-soft: rgba(239, 127, 208, .14);    --fuchsia-edge: rgba(239, 127, 208, .36);
  --green:   #0a7a55;               --green-soft:   rgba(53, 211, 153, .16);     --green-edge:  rgba(53, 211, 153, .42);
  --slate:   #5d5175;               --slate-soft:   rgba(124, 104, 147, .12);    --slate-edge:  rgba(124, 104, 147, .3);
  --red:     #c62347;               --red-soft:     rgba(255, 92, 122, .14);     --red-edge:    rgba(255, 92, 122, .4);
  --blue:    hsl(var(--h2) 70% 52%); --blue-soft:   hsl(var(--h2) 100% 68% / .14); --blue-edge: hsl(var(--h2) 80% 60% / .36);

  --shadow:    0 10px 26px -14px rgba(90, 20, 130, .22);
  --shadow-lg: 0 28px 70px -28px rgba(90, 20, 130, .35);
  --glow:      0 0 0 1px var(--accent-edge), 0 14px 34px -14px hsl(var(--h) 56% 50% / .3);
}

/* ========================================================================== */
/*  3. BASE                                                                   */
/* ========================================================================== */

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Les titres sont en Space Grotesk : c'est la signature typographique de la
   marque, celle qui distingue l'outil d'un gabarit d'administration. */
h1, h2, h3, h4, h5 {
  margin: 0; font-family: var(--font-display);
  font-weight: 600; letter-spacing: -.015em; color: var(--dark);
}
h1, h3.big { font-weight: 700; }

a { color: var(--purple-300); text-decoration: none; transition: color var(--fast); }
a:hover { color: var(--purple-100); text-decoration: none; }
:root[data-theme="light"] a { color: var(--accent); }
:root[data-theme="light"] a:hover { color: var(--accent-600); }

button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
code { font-family: var(--mono); font-size: .92em; }
::selection { background: hsl(var(--h) 56% 57% / .35); }

/* Barres de défilement accordées au thème. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 8px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent-edge); background-clip: content-box; }

/* -------------------------- Fond animé (SecureLink) ----------------------- */

/* Deux aurores violettes qui dérivent lentement, reprises à l'identique de
   SecureLink. Elles sont posées dans le document plutôt qu'en pseudo-élément
   du body : les losanges doivent pouvoir passer entre les deux couches. */
.bg-fx {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
}
.bg-fx::before, .bg-fx::after {
  content: ''; position: absolute; width: 60vw; height: 60vw;
  border-radius: 50%; filter: blur(90px); opacity: .35;
  animation: drift 22s ease-in-out infinite alternate;
}
.bg-fx::before {
  top: -20%; left: -10%;
  background: radial-gradient(circle, var(--accent-600), transparent 70%);
}
.bg-fx::after {
  bottom: -25%; right: -15%;
  background: radial-gradient(circle, var(--accent-2), transparent 70%);
  animation-delay: -11s;
}
:root[data-theme="light"] .bg-fx::before,
:root[data-theme="light"] .bg-fx::after { opacity: .16; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6%, 8%) scale(1.15); }
}

/* Losanges flottants — clin d'œil au logo, générés par assets/js/anim.js. */
.diamonds { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.diamonds i {
  position: absolute; width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--purple-400), var(--accent-600));
  transform: rotate(45deg); opacity: .18; border-radius: 3px;
  animation: float-diamond linear infinite;
}
:root[data-theme="light"] .diamonds i { opacity: .1; }

@keyframes float-diamond {
  from { transform: translateY(0) rotate(45deg); opacity: 0; }
  10%  { opacity: .18; }
  90%  { opacity: .18; }
  to   { transform: translateY(-115vh) rotate(405deg); opacity: 0; }
}

/* ========================================================================== */
/*  4. ANIMATIONS PARTAGÉES                                                   */
/* ========================================================================== */

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fade    { from { opacity: 0; } }
@keyframes rise    { from { opacity: 0; transform: translateY(14px); } }
@keyframes riseSm  { from { opacity: 0; transform: translateY(7px); } }
@keyframes pop     { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes slidein { from { opacity: 0; transform: translateX(26px); } }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes softpulse { 50% { opacity: .4; } }
@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--h) 90% 60% / .5); }
  70%      { box-shadow: 0 0 0 12px hsl(var(--h) 90% 60% / 0); }
}
@keyframes grow-x { from { transform: scaleX(0); } }

/* Entrée en cascade : chaque enfant direct arrive après le précédent.
   Posée sur le conteneur de page à chaque changement de route. */
.stagger > * { animation: rise .5s var(--ease) backwards; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .17s; }
.stagger > *:nth-child(5) { animation-delay: .22s; }
.stagger > *:nth-child(6) { animation-delay: .27s; }
.stagger > *:nth-child(n+7) { animation-delay: .3s; }

/* Respect du réglage système : plus aucun mouvement superflu. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ========================================================================== */
/*  5. CHARGEMENT                                                             */
/* ========================================================================== */

.app-loading { display: grid; place-items: center; height: 100vh; }
.boot { display: grid; place-items: center; gap: 14px; }
.boot-logo {
  filter: drop-shadow(0 8px 24px var(--accent-glow));
  animation: logo-in .7s var(--ease-back) backwards;
}
.boot-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.boot-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  border-right-color: var(--accent-2);
  animation: spin .8s linear infinite;
}

/* Squelettes : préférés au sablier, ils donnent la forme de ce qui arrive. */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.sk-line { height: 12px; margin-bottom: 10px; }
.sk-stack { padding: 18px; }
.sk-stack .sk-line:nth-child(3n)   { width: 62%; }
.sk-stack .sk-line:nth-child(3n+1) { width: 92%; }
.sk-stack .sk-line:nth-child(3n+2) { width: 78%; }
.sk-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sk-card { height: 104px; border-radius: var(--radius); }

/* Fine barre de progression en haut de page pendant les navigations. */
.route-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 400;
  background: var(--grad-2); box-shadow: 0 0 12px hsl(var(--h) 90% 60% / .8);
  width: 0; opacity: 0; transition: width .3s var(--ease), opacity .3s;
}
.route-progress.on { opacity: 1; }

/* ========================================================================== */
/*  6. CONNEXION                                                              */
/* ========================================================================== */

.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  position: relative; overflow: hidden;
}

/* Grille en perspective : donne de la profondeur sans image. */
.login-page::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(hsl(var(--h) 80% 70% / .16) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--h) 80% 70% / .16) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 75%);
}

.login-card {
  position: relative; width: 100%; max-width: 424px;
  background: var(--glass); backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 38px 36px; box-shadow: var(--shadow-lg);
  animation: pop .6s var(--ease-back) backwards .1s;
}
/* L'enrôlement du second facteur montre un code QR à côté de son formulaire :
   la largeur d'une carte de connexion n'y suffit pas. */
.login-card.wide { max-width: 620px; }

/* Liseré lumineux sur l'arête haute de la carte. */
.login-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, hsl(var(--h) 90% 70% / .5), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand .logo {
  width: 64px; height: 64px; display: inline-block; margin-bottom: 14px;
  filter: drop-shadow(0 8px 24px var(--accent-glow));
  animation: logo-in .7s var(--ease-back) backwards .15s;
}
@keyframes logo-in { from { opacity: 0; transform: translateY(-10px) rotate(-12deg) scale(.85); } }
.login-brand h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--text), var(--purple-300));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.login-brand p {
  margin: 6px 0 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .02em; color: var(--muted); text-transform: uppercase;
}
.login-foot {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); line-height: 1.75; text-align: center;
}

/* ---- Bouton « Se connecter avec Microsoft » -------------------------------
   Microsoft impose une apparence sobre et un libellé exact pour son bouton de
   connexion : fond neutre, logo à gauche, aucune couleur de marque tierce.
   On garde donc le violet de l'application pour l'anneau de focus seulement. */
.btn-microsoft {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 13px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: #fff; color: #3b3a39;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.btn-microsoft:hover:not(:disabled) {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn-microsoft:active:not(:disabled) { transform: translateY(1px); }
.btn-microsoft:disabled { opacity: .55; cursor: not-allowed; }
.btn-microsoft svg { flex: none; }

/* Le bouton reste blanc en thème sombre : c'est la présentation officielle,
   et l'écart de contraste le rend d'autant plus lisible. */
:root[data-theme="dark"] .btn-microsoft { background: #fff; color: #3b3a39; }

.login-domain {
  margin: 11px 0 0; text-align: center; font-size: 12px;
  color: var(--muted); line-height: 1.6;
}
.login-domain strong { color: var(--accent); font-weight: 600; }

.login-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 18px; color: var(--faint); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 1px;
}
.login-sep::before, .login-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ========================================================================== */
/*  7. MISE EN PAGE                                                           */
/* ========================================================================== */

.layout {
  display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh;
  transition: grid-template-columns var(--med);
}
.layout.rail { --sidebar-w: 74px; }

/* ------------------------------ Barre latérale ---------------------------- */

.sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-right: 1px solid var(--line);
  color: var(--sidebar-txt);
}

.sidebar-brand {
  padding: 18px 18px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; min-height: var(--topbar-h);
}
.sidebar-brand .logo {
  width: 38px; height: 38px; flex: none; display: block;
  filter: drop-shadow(0 4px 14px var(--accent-glow));
  transition: transform .35s var(--ease-back);
}
.sidebar-brand:hover .logo { transform: rotate(-8deg) scale(1.06); }
.sidebar-brand .txt { min-width: 0; }
.sidebar-brand strong {
  font-family: var(--font-display); font-weight: 700;
  color: var(--dark); font-size: 16px; letter-spacing: -.01em; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-brand span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
  color: var(--muted); text-transform: uppercase;
}

.nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; }
.nav-group { margin-bottom: 2px; }
.nav-label {
  padding: 14px 12px 6px; font-size: 9.5px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; opacity: .5; white-space: nowrap;
}
.nav a {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px; color: var(--sidebar-txt);
  font-size: 13.5px; margin-bottom: 2px; white-space: nowrap;
  transition: color var(--fast), background var(--fast), transform var(--fast);
}
.nav a::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0;
  border-radius: 0 3px 3px 0; background: var(--accent);
  transform: translateY(-50%); transition: height var(--med);
}
.nav a:hover { background: var(--surface-3); color: var(--dark); transform: translateX(2px); }
.nav a.active {
  background: var(--accent-soft); color: var(--dark); font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.nav a.active::before { height: 18px; }
.nav a.active .ico { color: var(--accent); filter: drop-shadow(0 0 6px hsl(var(--h) 90% 60% / .7)); }
.nav a .ico {
  width: 20px; flex: none; text-align: center; font-size: 15px; line-height: 1;
  transition: color var(--fast), transform var(--fast);
}
.nav a:hover .ico { transform: scale(1.15); }
.nav a .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav a .count {
  margin-left: auto; font-size: 10.5px; font-weight: 800; padding: 1px 7px;
  border-radius: 9px; background: var(--surface-3); color: var(--text-soft);
  font-variant-numeric: tabular-nums; transition: background var(--fast);
}
.nav a .count:empty { display: none; }
.nav a .count.alert {
  background: var(--red); color: #fff;
  box-shadow: 0 0 0 0 var(--red-edge); animation: halo 2.6s ease-out infinite;
}

/* Mode « rail » : icônes seules, libellé en infobulle. */
.layout.rail .nav-label,
.layout.rail .nav a .lbl,
.layout.rail .sidebar-brand .txt,
.layout.rail .sidebar-user .who { display: none; }
.layout.rail .nav a { justify-content: center; padding: 11px 0; }
.layout.rail .nav a .count {
  position: absolute; top: 3px; right: 8px; margin: 0; padding: 0 5px; font-size: 9.5px;
}
.layout.rail .sidebar-brand { justify-content: center; padding: 18px 0 16px; }
.layout.rail .sidebar-user { flex-direction: column; gap: 6px; }
.layout.rail .nav a[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%); background: var(--solid); color: var(--text);
  border: 1px solid var(--line); padding: 5px 10px; border-radius: 8px;
  font-size: 12px; white-space: nowrap; z-index: 60; box-shadow: var(--shadow);
}

.sidebar-user {
  padding: 12px 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-user .avatar { background: var(--grad); color: #fff; }
.sidebar-user .who { min-width: 0; flex: 1; }
.sidebar-user .who b {
  display: block; color: var(--dark); font-size: 13px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user .who span { font-size: 11px; opacity: .75; }

.icon-btn {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: 7px; border-radius: 9px; line-height: 1; font-size: 14px;
  transition: background var(--fast), color var(--fast), transform var(--fast);
}
.icon-btn:hover { background: var(--surface-3); color: var(--dark); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.92); }

/* ------------------------------- Barre haute ------------------------------ */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
  padding: 0 24px; display: flex; align-items: center; gap: 14px;
}
.topbar .titles { min-width: 0; }
.topbar h2 {
  font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: riseSm .35s var(--ease);
}
.topbar .crumb { font-size: 11.5px; color: var(--muted); }
.topbar .tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Déclencheur de la palette de commandes : occupe la place d'un champ de
   recherche, mais ouvre la palette plein écran. */
.cmd-trigger {
  display: flex; align-items: center; gap: 9px; min-width: 250px;
  padding: 8px 10px 8px 13px; border-radius: 11px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.cmd-trigger:hover { border-color: var(--accent-edge); background: var(--surface); box-shadow: var(--glow); }
.cmd-trigger .grow { text-align: left; }
.kbd {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 6px; background: var(--surface-3);
  border: 1px solid var(--line); color: var(--text-soft); white-space: nowrap;
  box-shadow: 0 1px 0 var(--line-strong);
}

.content { padding: 24px; flex: 1; min-width: 0; }

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 200px; }
.page-head h3 { font-size: 22px; letter-spacing: -.02em; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

/* Titre à dégradé, réservé aux accroches (bonjour, écrans vitrines). */
.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ========================================================================== */
/*  8. PALETTE DE COMMANDES (Ctrl+K)                                          */
/* ========================================================================== */

.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 300; padding: 12vh 20px 20px;
  display: flex; justify-content: center; align-items: flex-start;
  background: rgba(4, 2, 10, .55); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); animation: fade .2s var(--ease);
}
.cmdk {
  width: 100%; max-width: 640px; max-height: 66vh; display: flex; flex-direction: column;
  background: var(--solid); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; animation: pop .28s var(--ease-back);
}
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cmdk-input .ico { font-size: 17px; color: var(--accent); }
.cmdk-input input {
  flex: 1; border: 0; background: none; outline: none; font-size: 16px; color: var(--text);
}
.cmdk-input input::placeholder { color: var(--faint); }
.cmdk-list { overflow-y: auto; padding: 8px; }
.cmdk-sec {
  padding: 10px 12px 5px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--faint);
}
.cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; cursor: pointer; color: var(--text);
  border: 1px solid transparent; transition: background var(--fast);
}
.cmdk-item .ico {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--surface-3); font-size: 14px;
}
.cmdk-item .txt { min-width: 0; flex: 1; }
.cmdk-item .txt b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .txt small { color: var(--muted); font-size: 11.5px; }
.cmdk-item[aria-selected="true"] {
  background: var(--accent-soft); border-color: var(--accent-edge);
}
.cmdk-item[aria-selected="true"] .ico { background: var(--grad); color: #fff; }
.cmdk-foot {
  display: flex; gap: 16px; align-items: center; padding: 9px 16px;
  border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: 11px; color: var(--muted); flex-wrap: wrap;
}
.cmdk-empty { padding: 40px 20px; text-align: center; color: var(--muted); }

/* ========================================================================== */
/*  9. TIROIR LATÉRAL (notifications, apparence, raccourcis)                   */
/* ========================================================================== */

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 210; background: rgba(4, 2, 10, .5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fade .2s var(--ease); display: flex; justify-content: flex-end;
}
.drawer {
  width: 100%; max-width: 400px; height: 100%; display: flex; flex-direction: column;
  background: var(--solid); border-left: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg); animation: slidein .32s var(--ease);
}
.drawer-head {
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.drawer-head h3 { font-size: 15.5px; flex: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 30px; }
.drawer-body section { margin-bottom: 26px; }
.drawer-body section > h5 {
  font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px; font-weight: 800;
}

/* Sélecteur segmenté (thème, densité, plages de dates…). */
.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.seg button {
  border: 0; background: none; cursor: pointer; padding: 6px 13px;
  border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: background var(--fast), color var(--fast);
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface-3); color: var(--dark); box-shadow: var(--shadow); }
.seg.block { display: flex; }
.seg.block button { flex: 1; }

/* Pastilles de teinte d'accent. */
.hues { display: flex; gap: 9px; flex-wrap: wrap; }
.hue {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  transition: transform var(--fast), border-color var(--fast); position: relative;
}
.hue:hover { transform: scale(1.14); }
.hue.on { border-color: var(--text); }
.hue.on::after {
  content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Interrupteur. */
.switch { display: flex; align-items: center; gap: 11px; cursor: pointer; padding: 8px 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  width: 40px; height: 23px; flex: none; border-radius: 12px; position: relative;
  background: var(--surface-3); border: 1px solid var(--line); transition: background var(--fast);
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--muted); transition: transform var(--med), background var(--fast);
}
.switch input:checked + .track { background: var(--accent-soft); border-color: var(--accent-edge); }
.switch input:checked + .track::after { transform: translateX(17px); background: var(--accent); }
.switch .lb { font-size: 13px; }
.switch .lb small { display: block; color: var(--muted); font-size: 11.5px; }

/* Grille des raccourcis clavier. */
.shortcut-grid { display: grid; gap: 8px; }
.shortcut-grid .row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px;
}
.shortcut-grid .row .keys { margin-left: auto; display: flex; gap: 4px; }

/* Flux de notifications. */
.notif { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.notif:last-child { border-bottom: 0; }
.notif .dotmark {
  width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 6px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.notif.read .dotmark { background: var(--line-strong); box-shadow: none; }
.notif .txt { min-width: 0; flex: 1; font-size: 13px; line-height: 1.6; }
.notif .txt time { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }

/* ========================================================================== */
/*  10. CARTES, GRILLES, INDICATEURS                                           */
/* ========================================================================== */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: border-color var(--med), box-shadow var(--med), transform var(--med);
}
/* Liseré dégradé sur l'arête haut-gauche : le détail qui donne aux panneaux
   leur relief sans les alourdir d'une ombre portée. */
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, hsl(var(--h) 56% 57% / .35), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.card + .card { margin-top: 18px; }
.card.hoverable:hover { border-color: var(--accent-edge); box-shadow: var(--glow); transform: translateY(-2px); }

.card-head, .card-body, .card-foot { position: relative; z-index: 1; }
.card-head {
  padding: 15px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-head h4 { font-size: 14.5px; }
.card-head .sub { font-size: 11.5px; color: var(--muted); }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 18px; }
.grid.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.main-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

/* ---------------------------------- KPI ----------------------------------- */

.kpi {
  position: relative; overflow: hidden; padding: 17px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform var(--med), box-shadow var(--med), border-color var(--med);
  --tint: var(--accent);
}
/* Halo teinté dans l'angle : porte la couleur de l'indicateur sans l'imposer. */
.kpi::before {
  content: ''; position: absolute; right: -30px; top: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, var(--tint), transparent 68%);
  opacity: .18; transition: opacity var(--med), transform var(--med);
}
/* Le liseré de gauche se déroule de haut en bas. « backwards » plutôt que
   « forwards » : l'état d'arrivée est la hauteur naturelle du liseré, et l'état
   d'attente avant le délai est la hauteur nulle du premier cadre. */
.kpi::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tint); transform-origin: top;
  animation: grow-y .6s var(--ease) backwards .15s;
}
@keyframes grow-y { from { transform: scaleY(0); } }
.kpi.amber   { --tint: var(--amber); }
.kpi.green   { --tint: var(--green); }
.kpi.red     { --tint: var(--red); }
.kpi.fuchsia { --tint: var(--fuchsia); }
.kpi.slate   { --tint: var(--slate); }
.kpi.blue    { --tint: var(--blue); }
.kpi .label {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .9px; font-weight: 700;
}
.kpi .value {
  font-size: 30px; font-weight: 750; line-height: 1.1; margin-top: 6px;
  letter-spacing: -.03em; color: var(--dark); font-variant-numeric: tabular-nums;
}
.kpi .foot { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kpi .spark-mini { position: absolute; right: 14px; bottom: 12px; opacity: .7; }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover {
  transform: translateY(-3px); border-color: var(--accent-edge); box-shadow: var(--glow);
}
.kpi.clickable:hover::before { opacity: .34; transform: scale(1.15); }
.kpi.clickable:active { transform: translateY(-1px) scale(.99); }

/* Variation de tendance (+12 %, −4 %). */
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; }
.trend.up   { color: var(--green); }
.trend.down { color: var(--red); }
.trend.flat { color: var(--muted); }

/* ========================================================================== */
/*  11. TABLEAUX                                                              */
/* ========================================================================== */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  position: sticky; top: 0; z-index: 1; text-align: left; padding: 11px 14px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr { transition: background var(--fast); animation: riseSm .3s var(--ease) backwards; }
table.data tbody tr:nth-child(1) { animation-delay: .01s; }
table.data tbody tr:nth-child(2) { animation-delay: .03s; }
table.data tbody tr:nth-child(3) { animation-delay: .05s; }
table.data tbody tr:nth-child(4) { animation-delay: .07s; }
table.data tbody tr:nth-child(5) { animation-delay: .09s; }
table.data tbody tr:nth-child(n+6) { animation-delay: .11s; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr.rowlink { cursor: pointer; }
table.data tbody tr.rowlink:hover { background: var(--accent-soft); }
table.data tbody tr.rowlink:hover .ref { color: var(--accent); }
table.data tbody tr.picked { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tfoot td { background: var(--surface-2); font-weight: 700; }
table.data td.pick { width: 34px; }
table.data input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

.ref {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--text-soft); white-space: nowrap; transition: color var(--fast);
}
.cell-strong { font-weight: 600; color: var(--dark); }
.cell-sub { font-size: 11.5px; color: var(--muted); }
.nowrap { white-space: nowrap; }

.empty { padding: 52px 20px; text-align: center; color: var(--muted); }
.empty .big {
  font-size: 40px; margin-bottom: 10px; line-height: 1;
  background: var(--grad-2); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; opacity: .8;
}
.empty p { margin: 0 0 4px; font-weight: 650; color: var(--text-soft); }
.empty small { font-size: 12.5px; }

/* Barre d'actions groupées, apparue quand des lignes sont cochées. */
.bulkbar {
  position: sticky; bottom: 16px; z-index: 25; margin: 14px auto 0; width: fit-content;
  display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 16px;
  background: var(--solid); border: 1px solid var(--line-strong);
  border-radius: 999px; box-shadow: var(--shadow-lg);
  animation: pop .3s var(--ease-back);
}
.bulkbar b { font-size: 13px; }

/* ========================================================================== */
/*  12. BADGES ET PASTILLES                                                   */
/* ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-family: var(--mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.7;
}
.badge.s-Ouvert    { background: var(--violet-soft);  color: var(--violet);  border-color: var(--violet-edge); }
.badge.s-EnCours   { background: var(--amber-soft);   color: var(--amber);   border-color: var(--amber-edge); }
.badge.s-EnAttente { background: var(--fuchsia-soft); color: var(--fuchsia); border-color: var(--fuchsia-edge); }
.badge.s-Resolu    { background: var(--green-soft);   color: var(--green);   border-color: var(--green-edge); }
.badge.s-Cloture   { background: var(--slate-soft);   color: var(--slate);   border-color: var(--slate-edge); }

.badge.p-Basse    { background: var(--blue-soft);  color: var(--blue);  border-color: var(--blue-edge); }
.badge.p-Normale  { background: var(--green-soft); color: var(--green); border-color: var(--green-edge); }
.badge.p-Haute    { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-edge); }
.badge.p-Critique {
  background: var(--red-soft); color: var(--red); border-color: var(--red-edge);
}
.badge.p-Critique::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: softpulse 1.6s ease-in-out infinite;
}

.badge.a-Enservice     { background: var(--green-soft);  color: var(--green);  border-color: var(--green-edge); }
.badge.a-Enpanne       { background: var(--red-soft);    color: var(--red);    border-color: var(--red-edge); }
.badge.a-Enmaintenance { background: var(--amber-soft);  color: var(--amber);  border-color: var(--amber-edge); }
.badge.a-Stock         { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-edge); }
.badge.a-Horsservice   { background: var(--slate-soft);  color: var(--slate);  border-color: var(--slate-edge); }

.badge.neutral { background: var(--surface-3);   color: var(--muted);  border-color: var(--line); }
.badge.danger  { background: var(--red-soft);    color: var(--red);    border-color: var(--red-edge); }
.badge.ok      { background: var(--green-soft);  color: var(--green);  border-color: var(--green-edge); }
.badge.info    { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-edge); }
.badge.warn    { background: var(--amber-soft);  color: var(--amber);  border-color: var(--amber-edge); }
.badge.role    { background: var(--accent-soft); color: var(--purple-300); border-color: var(--accent-700); }
.badge.portal  { background: var(--surface-3);   color: var(--muted);  border-color: var(--line); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-soft);
}
.chip button { border: 0; background: none; cursor: pointer; color: var(--faint); padding: 0; font-size: 14px; line-height: 1; }
.chip button:hover { color: var(--red); }

/* ========================================================================== */
/*  13. BOUTONS                                                               */
/* ========================================================================== */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background var(--fast), border-color var(--fast),
              transform var(--fast), box-shadow var(--fast), color var(--fast);
}
.btn:hover { background: var(--surface-3); border-color: var(--accent-edge); color: var(--dark); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn.primary { background: var(--surface-3); border-color: var(--line-strong); color: var(--dark); }
.btn.accent {
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 14px 34px -12px var(--accent-glow);
}
.btn.accent:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 16px 40px -12px var(--accent-glow); }
/* Balayage lumineux au survol — signature des boutons LDS. */
.btn.accent::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s;
}
.btn.accent:hover::after { transform: translateX(120%); }
.btn.success { background: var(--green); border-color: transparent; color: #fff; }
.btn.success:hover { color: #fff; filter: brightness(1.08); }
.btn.danger { background: var(--red-soft); border-color: var(--red-edge); color: var(--red); }
.btn.danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.ghost { background: none; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
.btn.lg { padding: 11px 20px; font-size: 14px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Onde au clic, posée par assets/js/anim.js. */
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255, 255, 255, .45); pointer-events: none;
  animation: ripple .55s var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ========================================================================== */
/*  14. FORMULAIRES                                                           */
/* ========================================================================== */

.field { margin-bottom: 15px; }
.field label {
  display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650;
  color: var(--text-soft); letter-spacing: .2px;
}
.field label .req { color: var(--red); }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

.input, .field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--text); font-size: 13.5px;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.65; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 30px;
}
.field select option { background: var(--solid); color: var(--text); }
.field input[type=checkbox] { width: auto; margin-right: 7px; vertical-align: -2px; accent-color: var(--accent); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .55; cursor: not-allowed; }
.field-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { width: auto; accent-color: var(--accent); }

.filters {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.filters select, .filters input {
  padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text); font-size: 12.5px;
}
.filters select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.filters select option { background: var(--solid); }
.filters select:focus, .filters input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.filters input[type=search] { min-width: 220px; }
.filters .spacer { margin-left: auto; }

.pill-row { display: flex; gap: 7px; flex-wrap: wrap; }
.pill {
  padding: 6px 13px; border-radius: 999px; cursor: pointer; font-size: 12.5px;
  font-weight: 600; border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--text-soft); transition: all var(--fast);
}
.pill:hover { border-color: var(--accent-edge); color: var(--dark); }
.pill.on {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ========================================================================== */
/*  15. MODALES ET TOASTS                                                     */
/* ========================================================================== */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 22px;
  background: rgba(4, 2, 10, .58); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); animation: fade .2s var(--ease); overflow-y: auto;
}
.modal {
  width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column;
  background: var(--solid); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: pop .32s var(--ease-back);
}
.modal.wide { max-width: 880px; }
.modal.xl { max-width: 1100px; }
.modal-head {
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.modal-head h3 { font-size: 16px; flex: 1; }
.modal-head .close {
  background: none; border: 0; font-size: 24px; line-height: 1; color: var(--faint);
  cursor: pointer; padding: 0 4px; border-radius: 8px; transition: color var(--fast), transform var(--fast);
}
.modal-head .close:hover { color: var(--red); transform: rotate(90deg); }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-foot {
  padding: 15px 22px; border-top: 1px solid var(--line); display: flex; gap: 9px;
  justify-content: flex-end; background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-wrap: wrap;
}

.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 250;
  display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 40px));
}
.toast {
  position: relative; overflow: hidden; padding: 12px 16px 13px;
  background: var(--solid); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent); border-radius: 12px;
  box-shadow: var(--shadow-lg); animation: slidein .35s var(--ease-back);
  font-size: 13px;
}
.toast b { display: block; margin-bottom: 2px; font-size: 12.5px; }
.toast span { color: var(--muted); font-size: 12.5px; }
.toast.ok    { border-left-color: var(--green); }
.toast.ok b    { color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.error b { color: var(--red); }
.toast.warn  { border-left-color: var(--amber); }
.toast.warn b  { color: var(--amber); }
.toast.info b  { color: var(--accent); }
/* Minuterie visible : on voit le message s'épuiser. */
.toast i.timer {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; opacity: .35; transform-origin: left;
  animation: toast-timer linear forwards;
}
@keyframes toast-timer { to { transform: scaleX(0); } }

/* ========================================================================== */
/*  16. ÉLÉMENTS MÉTIER                                                       */
/* ========================================================================== */

.avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 11px; font-size: 12px; font-weight: 700; letter-spacing: .5px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-edge);
}
.avatar.sm { width: 26px; height: 26px; font-size: 10px; border-radius: 8px; }
.avatar.lg { width: 46px; height: 46px; font-size: 16px; border-radius: 14px; }
.user-cell { display: flex; align-items: center; gap: 9px; }

.meta-list { display: grid; }
.meta-list .row {
  display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.meta-list .row:last-child { border-bottom: 0; }
.meta-list .row .k { color: var(--muted); width: 42%; flex: none; font-size: 12.5px; }
.meta-list .row .v { font-weight: 600; min-width: 0; word-break: break-word; color: var(--dark); }

/* Fil de discussion d'un ticket. */
.timeline { display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 12px; animation: riseSm .35s var(--ease) backwards; }
.msg .bubble {
  flex: 1; min-width: 0; padding: 13px 15px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: border-color var(--fast);
}
.msg:hover .bubble { border-color: var(--line-strong); }
.msg.internal .bubble {
  background: var(--amber-soft); border-color: var(--amber-edge);
  border-left: 3px solid var(--amber);
}
.msg.client .bubble { background: var(--accent-soft); border-color: var(--accent-edge); }
.msg .head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.msg .head b { font-size: 13px; color: var(--dark); }
.msg .head time { font-size: 11px; color: var(--faint); margin-left: auto; }
.msg .body { font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

.history-list { font-size: 13px; }
.history-list .h-item {
  display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line);
  position: relative;
}
.history-list .h-item:last-child { border-bottom: 0; }
.history-list .h-when { color: var(--faint); font-size: 11px; white-space: nowrap; width: 116px; flex: none; }
.history-list .h-what { min-width: 0; }
.history-list em { color: var(--muted); font-style: normal; }

/* Jauge SLA. Elle se remplit à l'affichage, ce qui attire l'œil sur les
   tickets qui approchent de l'échéance. */
.sla-bar {
  height: 5px; border-radius: 3px; background: var(--surface-3);
  overflow: hidden; margin-top: 6px;
}
.sla-bar i {
  display: block; height: 100%; border-radius: 3px; background: var(--green);
  transform-origin: left; animation: grow-x .8s var(--ease) backwards .1s;
}
.sla-bar.warn i { background: linear-gradient(90deg, var(--green), var(--amber)); }
.sla-bar.late i {
  background: linear-gradient(90deg, var(--amber), var(--red));
  box-shadow: 0 0 10px var(--red-edge);
}

/* ========================================================================== */
/*  17. GRAPHIQUES                                                            */
/* ========================================================================== */

.chart-bars { display: flex; flex-direction: column; gap: 11px; }
.chart-bars .b-row {
  display: grid; grid-template-columns: 128px 1fr 46px; align-items: center;
  gap: 11px; font-size: 13px;
}
.chart-bars .track { height: 9px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.chart-bars .track i {
  display: block; height: 100%; border-radius: 5px; background: var(--accent);
  transform-origin: left; animation: grow-x .7s var(--ease) backwards .1s;
}
.chart-bars .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dark); }

.legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); margin-top: 14px; flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }

/* Courbe en aire (SVG). Le tracé se dessine, l'aire apparaît en fondu. */
.area-chart { width: 100%; display: block; overflow: visible; }
.area-chart .ln {
  fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  /* pathLength="1" est posé sur le tracé : la longueur est normalisée, le
     dessin progressif occupe donc toute la durée quelle que soit la courbe. */
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.4s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.area-chart .ar { animation: fade .9s var(--ease) backwards .5s; }
.area-chart .gl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.area-chart text { fill: var(--faint); font-size: 10px; font-family: var(--font); }
.area-chart .pt { opacity: 0; transition: opacity var(--fast); }
.area-chart:hover .pt { opacity: 1; }

/* Anneau de progression (SVG). */
.ring { display: block; transform: rotate(-90deg); }
.ring .bgc { fill: none; stroke: var(--surface-3); }
.ring .fgc { fill: none; stroke-linecap: round; animation: ringfill 1.1s var(--ease) forwards; }
@keyframes ringfill { from { stroke-dashoffset: var(--circ); } }
.ring-wrap { position: relative; display: inline-grid; place-items: center; }
.ring-wrap .mid {
  position: absolute; text-align: center; line-height: 1.25;
}
.ring-wrap .mid b { display: block; font-size: 20px; font-weight: 750; color: var(--dark); font-variant-numeric: tabular-nums; }
.ring-wrap .mid small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }

.stat-inline { display: flex; gap: 22px; flex-wrap: wrap; }
.stat-inline > div .k {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .8px; font-weight: 700;
}
.stat-inline > div .v { font-size: 20px; font-weight: 750; color: var(--dark); font-variant-numeric: tabular-nums; }

/* Carte de mise en avant, fond dégradé. */
.hero {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: 26px 28px; border: 1px solid var(--accent-edge);
  background: linear-gradient(135deg, hsl(var(--h) 80% 55% / .18), hsl(var(--h2) 80% 50% / .1));
}
.hero::after {
  content: ''; position: absolute; right: -70px; top: -90px; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, hsl(var(--h) 90% 65% / .3), transparent 65%);
  animation: drift 26s ease-in-out infinite alternate;
}
.hero h3 { font-size: 24px; }
.hero p { margin: 6px 0 0; color: var(--text-soft); max-width: 60ch; }
.hero .btn-row { margin-top: 18px; position: relative; }

/* ========================================================================== */
/*  18. ONGLETS, PIÈCES JOINTES, ALERTES                                      */
/* ========================================================================== */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 16px; overflow-x: auto; }
.tabs button {
  position: relative; border: 0; background: none; cursor: pointer; padding: 13px 14px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--fast);
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabs button .n {
  margin-left: 6px; font-size: 10.5px; padding: 1px 6px; border-radius: 8px;
  background: var(--surface-3); font-weight: 700;
}

.attach-list { display: flex; flex-direction: column; gap: 8px; }
.attach {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px;
  border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px; transition: border-color var(--fast), transform var(--fast);
}
.attach:hover { border-color: var(--accent-edge); transform: translateX(2px); }
.attach .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach .size { color: var(--muted); font-size: 11.5px; }

/* Zone de dépôt de fichiers. */
.dropzone {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  padding: 26px 18px; text-align: center; color: var(--muted); font-size: 13px;
  transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone .big { font-size: 26px; margin-bottom: 6px; opacity: .7; }

.alert-box {
  padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); font-size: 13px; line-height: 1.65; margin-bottom: 15px;
}
.alert-box.info  { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent); }
.alert-box.warn  { background: var(--amber-soft);  border-color: var(--amber-edge);  color: var(--amber); }
.alert-box.error { background: var(--red-soft);    border-color: var(--red-edge);    color: var(--red); }
.alert-box.ok    { background: var(--green-soft);  border-color: var(--green-edge);  color: var(--green); }
.alert-box strong { color: inherit; }
.alert-box code { font-family: var(--mono); font-size: 12px; }
.alert-box ul, .alert-box ol { margin: 8px 0 0; padding-left: 20px; }

.kb-body { font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.stars { display: inline-flex; gap: 2px; font-size: 15px; color: var(--amber); letter-spacing: 1px; }

/* ========================================================================== */
/*  19. TABLEAU KANBAN                                                        */
/* ========================================================================== */

.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start;
}
.kan-col {
  display: flex; flex-direction: column; min-height: 220px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background var(--fast), border-color var(--fast);
}
.kan-col.over {
  background: var(--accent-soft); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.kan-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2;
  background: inherit; border-radius: var(--radius) var(--radius) 0 0;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.kan-head .swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kan-head b { font-size: 12.5px; letter-spacing: .2px; }
.kan-head .n {
  margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 8px;
  border-radius: 8px; background: var(--surface-3); color: var(--text-soft);
}
.kan-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; min-height: 90px; }

.kan-card {
  padding: 12px 13px; border-radius: 12px; cursor: grab;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); animation: riseSm .3s var(--ease) backwards;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast), opacity var(--fast);
}
.kan-card:hover { transform: translateY(-2px); border-color: var(--accent-edge); box-shadow: var(--glow); }
.kan-card:active { cursor: grabbing; }
.kan-card.dragging { opacity: .4; transform: rotate(2deg) scale(.97); }
.kan-card .k-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.kan-card .k-sub { font-size: 13px; font-weight: 600; color: var(--dark); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kan-card .k-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 11px; color: var(--muted);
}
.kan-card .k-foot .right { margin-left: auto; }
.kan-empty { padding: 22px 10px; text-align: center; color: var(--faint); font-size: 12px; }

/* ========================================================================== */
/*  20. CHRONOMÈTRE FLOTTANT                                                  */
/* ========================================================================== */

.timer-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 180;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--solid); border: 1px solid var(--accent-edge);
  border-radius: 999px; box-shadow: var(--shadow-lg);
  animation: pop .35s var(--ease-back);
}
.timer-fab .pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none;
  animation: halo 1.8s ease-out infinite;
}
.timer-fab .tm {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  color: var(--dark); font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
.timer-fab .lbl { font-size: 11px; color: var(--muted); max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-fab.paused .pulse { background: var(--amber); animation: none; }

/* ========================================================================== */
/*  21. GRILLE DE PERMISSIONS (rôles)                                         */
/* ========================================================================== */

.perm-groups { display: grid; gap: 14px; }
.perm-group {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); overflow: hidden;
}
.perm-group > header {
  display: flex; align-items: center; gap: 11px; padding: 12px 15px;
  background: var(--surface-3); border-bottom: 1px solid var(--line);
}
.perm-group > header .ico {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 14px;
}
.perm-group > header h5 { font-size: 13.5px; }
.perm-group > header .n {
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.perm-group > header .toggle-all {
  margin-left: auto; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-soft);
  transition: all var(--fast);
}
.perm-group > header .toggle-all:hover { border-color: var(--accent); color: var(--accent); }

.perm-item {
  display: flex; gap: 11px; padding: 10px 15px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background var(--fast);
}
.perm-item:last-child { border-bottom: 0; }
.perm-item:hover { background: var(--accent-soft); }
.perm-item input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.perm-item .txt { min-width: 0; }
.perm-item .txt b { display: block; font-size: 13px; font-weight: 600; color: var(--dark); }
.perm-item .txt small { color: var(--muted); font-size: 11.5px; line-height: 1.55; display: block; }
.perm-item.locked { opacity: .6; cursor: not-allowed; }
.perm-item .key {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  align-self: center; white-space: nowrap;
}

.scope-choice { display: grid; gap: 9px; }
.scope-choice label {
  display: flex; gap: 11px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); transition: all var(--fast);
}
.scope-choice label:hover { border-color: var(--accent); background: var(--accent-soft); }
.scope-choice input { margin: 2px 0 0; accent-color: var(--accent); }
.scope-choice b { display: block; font-size: 13px; color: var(--dark); }
.scope-choice small { color: var(--muted); font-size: 11.5px; }

.role-card {
  display: flex; flex-direction: column; gap: 10px; padding: 17px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.role-card:hover { transform: translateY(-2px); border-color: var(--accent-edge); box-shadow: var(--glow); }
.role-card.system { border-left: 3px solid var(--accent); }
.role-card h5 { font-size: 14.5px; }
.role-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.role-card .meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.role-card .meter i {
  display: block; height: 100%; background: var(--grad); border-radius: 3px;
  transform-origin: left; animation: grow-x .7s var(--ease) backwards .1s;
}
.role-card .foot { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 4px; }

/* ========================================================================== */
/*  22. RGPD, MENTIONS LÉGALES                                                */
/* ========================================================================== */

.gdpr-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 190;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 15px 18px; border-radius: var(--radius);
  background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
  animation: rise .45s var(--ease-back);
}
.gdpr-banner .txt { flex: 1; min-width: 220px; font-size: 12.5px; line-height: 1.65; color: var(--text-soft); }
.gdpr-banner .txt b { display: block; font-size: 13.5px; color: var(--dark); margin-bottom: 3px; }

.legal { max-width: 860px; }
.legal h4 { font-size: 15px; margin: 26px 0 8px; }
.legal h4:first-child { margin-top: 0; }
.legal p { margin: 0 0 10px; line-height: 1.8; color: var(--text-soft); }
.legal ul { margin: 0 0 12px; padding-left: 22px; line-height: 1.8; color: var(--text-soft); }
.legal li { margin-bottom: 4px; }
.legal .todo { background: var(--amber-soft); color: var(--amber); padding: 1px 6px; border-radius: 5px; font-weight: 600; }

/* ========================================================================== */
/*  23. UTILITAIRES                                                           */
/* ========================================================================== */

.mono { font-family: var(--mono); font-size: 12.5px; }
.text-muted { color: var(--muted); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-amber { color: var(--amber); }
.text-accent { color: var(--accent); }
.mt0 { margin-top: 0; } .mt12 { margin-top: 12px; } .mt18 { margin-top: 18px; }
.mb0 { margin-bottom: 0; } .mb12 { margin-bottom: 12px; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }
.tabnum { font-variant-numeric: tabular-nums; }

/* ========================================================================== */
/*  24. RESPONSIVE                                                            */
/* ========================================================================== */

@media (max-width: 1240px) {
  .grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.main-side { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; width: min(84vw, var(--sidebar-w));
    transform: translateX(-100%); transition: transform var(--med);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: none; }
  .layout.rail .sidebar { width: min(84vw, 256px); }
  .layout.rail .nav-label, .layout.rail .nav a .lbl,
  .layout.rail .sidebar-brand .txt, .layout.rail .sidebar-user .who { display: revert; }
  .layout.rail .nav a { justify-content: flex-start; padding: 10px 12px; }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 35; background: rgba(4, 2, 10, .55);
    backdrop-filter: blur(2px); animation: fade .2s var(--ease);
  }
  .btn-burger { display: inline-flex !important; }
  .grid.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmd-trigger { min-width: 0; }
  .cmd-trigger .grow, .cmd-trigger .kbd { display: none; }
}

@media (max-width: 680px) {
  .content { padding: 16px 14px 40px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar .crumb { display: none; }
  .grid.k2, .grid.k3, .grid.k4 { grid-template-columns: 1fr; }
  .field-row, .field-row.k3 { grid-template-columns: 1fr; }
  .modal { max-height: 94vh; }
  .toasts { left: 14px; right: 14px; max-width: none; }
  .gdpr-banner { left: 10px; right: 10px; bottom: 10px; }
  .meta-list .row { flex-direction: column; gap: 2px; }
  .meta-list .row .k { width: auto; }
  .timer-fab { right: 12px; bottom: 12px; }
}

.btn-burger { display: none; }

/* ========================================================================== */
/*  25. IMPRESSION                                                            */
/* ========================================================================== */

@media print {
  body::before, body::after, .sidebar, .topbar, .filters,
  .btn, .btn-row, .toasts, .gdpr-banner, .timer-fab, .bulkbar { display: none !important; }
  .layout { grid-template-columns: 1fr; }
  .content { padding: 0; }
  .card { break-inside: avoid; border-color: #ccc; box-shadow: none; background: #fff; }
  :root { --text: #111; --dark: #000; --muted: #555; --surface: #fff; --surface-2: #fff; }
}

/* ========================================================================== */
/*  26. ANIMATIONS DÉSACTIVÉES PAR L'UTILISATEUR                              */
/* ========================================================================== */

/* Posé sur <html> par assets/js/theme.js quand le réglage « Mouvement » est
   décoché. Distinct de la règle prefers-reduced-motion : c'est un choix fait
   dans l'application, pas dans le système. */
html.no-motion *,
html.no-motion *::before,
html.no-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html.no-motion body::before { animation: none; }

/* ========================================================================== */
/*  27. DENSITÉ COMPACTE                                                      */
/* ========================================================================== */

/* Une seule bascule : les écrans de suivi affichent nettement plus de lignes
   sans changer la structure de la page. */
:root[data-density="compact"] {
  --radius: 11px;
  --radius-lg: 15px;
  --topbar-h: 54px;
}
:root[data-density="compact"] body { font-size: 13px; }
:root[data-density="compact"] .content { padding: 16px; }
:root[data-density="compact"] .card-body { padding: 13px; }
:root[data-density="compact"] .card-head { padding: 11px 14px; }
:root[data-density="compact"] .card + .card { margin-top: 12px; }
:root[data-density="compact"] .grid { gap: 12px; }
:root[data-density="compact"] table.data td { padding: 7px 11px; }
:root[data-density="compact"] table.data th { padding: 7px 11px; }
:root[data-density="compact"] .kpi { padding: 12px 14px; }
:root[data-density="compact"] .kpi .value { font-size: 24px; }
:root[data-density="compact"] .nav a { padding: 7px 11px; }
:root[data-density="compact"] .field { margin-bottom: 11px; }
:root[data-density="compact"] .page-head { margin-bottom: 14px; }
:root[data-density="compact"] .hero { padding: 18px 20px; }

/* ========================================================================== */
/*  28. FINITIONS                                                             */
/* ========================================================================== */

/* Focus visible homogène : la navigation au clavier doit rester lisible
   partout, y compris sur les éléments rendus interactifs par le script. */
a:focus-visible,
.nav a:focus-visible,
.icon-btn:focus-visible,
.pill:focus-visible,
.seg button:focus-visible,
.cmd-trigger:focus-visible,
.kan-card:focus-visible,
table.data tr.rowlink:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Le bouton de repli du menu n'a pas de sens sur mobile : le menu y est
   déjà escamotable par le bouton burger. */
@media (max-width: 980px) { #btn-rail { display: none; } }

/* Cellule de tableau contenant un lien d'action : évite que le clic sur le
   lien déclenche aussi l'ouverture de la ligne. */
table.data td .stop { position: relative; z-index: 2; }

/* ========================================================================== */
/*  29. MUR D'ATELIER                                                         */
/* ========================================================================== */

/* Le mur prend tout l'écran : la barre latérale et la barre haute disparaissent
   le temps de la vue. Tout est surdimensionné pour une lecture à trois mètres. */
body.wall-mode .sidebar,
body.wall-mode .topbar,
body.wall-mode .gdpr-banner,
body.wall-mode .timer-fab { display: none !important; }
body.wall-mode .layout { grid-template-columns: 1fr; }
body.wall-mode .content { padding: 0; }

#wall {
  display: flex; flex-direction: column; min-height: 100vh; padding: 22px 30px 16px;
  animation: fade .5s var(--ease);
}

/* --- En-tête du mur -------------------------------------------------------
   La rangée se termine par deux éléments qui comptent autant l'un que l'autre :
   les commandes du mur, et une zone volontairement vide.

   Cette zone vide est la correction du défaut visible sur la capture d'écran :
   l'application de bureau dessine ses boutons Réduire / Agrandir / Fermer
   par-dessus la page, en haut à droite. Le bouton « Quitter » du mur se
   retrouvait dessous, donc impossible à cliquer — on ne pouvait plus sortir du
   mur autrement qu'en fermant l'application. La zone réserve la place de ces
   boutons ; dans un navigateur elle ne fait aucune largeur. */
.wall-top {
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
}
.wall-top img { filter: drop-shadow(0 6px 18px var(--accent-glow)); flex: none; }
.wall-brand { min-width: 0; }
.wall-brand b {
  display: block; font-family: var(--font-display); font-size: 22px;
  font-weight: 700; color: var(--dark); letter-spacing: -.01em;
}
.wall-brand span {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}

.wall-clock {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  color: var(--dark); font-variant-numeric: tabular-nums; line-height: 1;
}
.wall-dots { display: flex; gap: 7px; margin-left: auto; }
.wall-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong);
  display: block; transition: background var(--med), transform var(--med);
}
.wall-dots i.on { background: var(--accent); transform: scale(1.35); box-shadow: 0 0 10px var(--accent-glow); }

/* Commandes réduites à deux pastilles : sur un écran lu à trois mètres, un
   bouton libellé « Quitter » occupe une place que les chiffres méritent mieux.
   Le titre et l'étiquette accessible portent le sens. */
.wall-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.wall-btn {
  width: 34px; height: 34px; font-size: 15px; line-height: 1;
  border-radius: 9px; opacity: .55; transition: opacity var(--fast), background var(--fast);
}
.wall-btn:hover, .wall-btn:focus-visible { opacity: 1; }

/* Largeur nulle par défaut : un navigateur n'a pas de boutons de fenêtre
   posés sur la page. La coquille de bureau, elle, en a. */
.wall-safe { flex: none; width: 0; }
body.desktop-shell .wall-safe { width: 148px; }

/* Quand la coquille expose réellement l'emprise de ses boutons de fenêtre
   (superposition de contrôles), on s'y fie plutôt que d'estimer.
   La condition est le MODE D'AFFICHAGE, et non « @supports (env(...)) » : ce
   dernier est vrai dans des navigateurs où la variable reste vide, et le calcul
   retomberait alors à 16 px — c'est-à-dire un mur qui repasse SOUS les boutons,
   exactement le défaut que cette zone corrige. */
@media (display-mode: window-controls-overlay) {
  body.desktop-shell .wall-safe {
    width: calc(100vw - env(titlebar-area-width) - env(titlebar-area-x) + 16px);
  }
}

.wall-body { flex: 1; display: flex; flex-direction: column; gap: 22px; animation: rise .45s var(--ease); }

/* --- Grille de tuiles -----------------------------------------------------
   Quatre colonnes ; chaque tuile en occupe de une à quatre selon sa largeur
   choisie dans le composeur. */
.wall-grid {
  display: grid; gap: 20px; align-content: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wall-card {
  position: relative; overflow: hidden; padding: 22px 24px;
  border-radius: var(--radius-lg); grid-column: span 1;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--line); --tint: var(--accent);
  display: flex; flex-direction: column; gap: 6px; min-height: 148px;
}
.wall-card.span-2 { grid-column: span 2; }
.wall-card.span-3 { grid-column: span 3; }
.wall-card.span-4 { grid-column: span 4; }

/* Filet coloré en pied de tuile : c'est lui qui donne au mur sa lisibilité de
   loin, bien avant le texte. */
.wall-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--tint), transparent);
}
.wall-card.accent  { --tint: var(--accent); }
.wall-card.red     { --tint: var(--red); }
.wall-card.green   { --tint: var(--green); }
.wall-card.amber   { --tint: var(--amber); }
.wall-card.fuchsia { --tint: var(--fuchsia); }
.wall-card.slate   { --tint: var(--slate); }

.wall-card .w-label {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); font-weight: 600;
}
.wall-card .w-value {
  font-family: var(--font-display); font-size: clamp(40px, 5.2vw, 76px);
  font-weight: 700; line-height: 1; color: var(--dark);
  font-variant-numeric: tabular-nums; margin: 2px 0 4px;
}
.wall-card .w-value.big-clock { font-size: clamp(38px, 4.4vw, 64px); }
.wall-card .w-sub { font-size: 15px; color: var(--muted); }

.wall-ring { display: grid; place-items: center; flex: 1; }
.wall-ring .ring-wrap .mid b { font-size: 40px; }
.wall-ring .ring-wrap .mid small { font-size: 13px; }

.wall-today { display: grid; gap: 14px; margin-top: 6px; }
.wall-today b {
  font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700; color: var(--dark); margin-right: 10px;
  font-variant-numeric: tabular-nums;
}
.wall-today span { font-size: 15px; color: var(--muted); }

/* --- Tuile « lien externe » ----------------------------------------------- */
.wall-link {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  align-items: start; text-decoration: none; color: inherit; height: 100%;
}
.wall-link .w-label { color: var(--dark); font-size: 15px; letter-spacing: .04em; }
.wall-link .w-sub { grid-column: 1 / -1; word-break: break-word; }
.wall-link .w-link-go {
  font-size: 22px; color: var(--accent); line-height: 1;
  transition: transform var(--fast);
}
.wall-link:hover .w-link-go { transform: translate(3px, -3px); }

.wall-note {
  font-size: clamp(16px, 1.5vw, 22px); line-height: 1.5; color: var(--dark);
  white-space: pre-wrap; word-break: break-word;
}

/* --- Listes (retards, équipe, clients) ------------------------------------ */
.wall-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.wall-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 130px 1fr 160px 160px 80px;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
}
.wall-row.late { border-left: 5px solid var(--red); }
.wall-row .ref { font-size: 15px; color: var(--purple-300); }
.wall-row .w-sub {
  font-size: 17px; color: var(--dark); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wall-row .w-client, .wall-row .w-who { color: var(--muted); font-size: 15px; }
.wall-row .w-who.big { color: var(--dark); font-size: 18px; font-weight: 600; }
.wall-row .w-late { color: var(--red); font-weight: 700; text-align: right; font-size: 20px; }
.wall-row .w-bar { height: 12px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.wall-row .w-bar i { display: block; height: 100%; border-radius: 6px; }
.wall-row .w-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 19px; }

/* La charge de l'équipe et les clients n'ont pas le même nombre de colonnes
   que les retards : chacun déclare la sienne, sinon les cellules se décalent. */
.wall-row.team { grid-template-columns: 1fr 2fr repeat(3, 70px); }
.wall-row.trio { grid-template-columns: 110px 1fr 80px; }
.wall-legend { text-align: right; color: var(--faint); font-size: 13px; margin-top: 4px; }

.wall-foot {
  margin-top: 16px; text-align: center; font-family: var(--mono);
  font-size: 12px; color: var(--faint); letter-spacing: .05em;
}
.wall-error { display: grid; place-items: center; gap: 8px; min-height: 60vh; text-align: center; }
.wall-error h2 { font-size: 32px; color: var(--red); }
.wall-error p { color: var(--muted); font-size: 18px; margin: 0; }

/* --- Composeur du mur ----------------------------------------------------- */
.wall-editor { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.wall-editor h4 { font-size: 13px; margin: 0 0 10px; }
.wall-editor h4 .sub { font-weight: 400; color: var(--muted); font-size: 12px; }

.we-types { display: flex; flex-direction: column; gap: 7px; max-height: 52vh; overflow-y: auto; }
.we-type {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--dark);
  transition: border-color var(--fast), background var(--fast);
}
.we-type:hover { border-color: var(--accent-edge); background: var(--accent-soft); }
.we-type b { display: block; font-size: 13px; }
.we-type small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; margin-top: 2px; }

#we-rows { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; }
.we-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
}
.we-handle { display: flex; flex-direction: column; gap: 4px; }
.we-fields { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.we-kind {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); font-weight: 700;
}
.we-fields input, .we-fields select { width: 100%; }
.we-small { display: flex; gap: 12px; flex-wrap: wrap; }
.we-small label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted);
}
.we-small select { width: auto; min-width: 120px; }

@media (max-width: 900px) {
  .wall-editor { grid-template-columns: 1fr; }
  .we-types, #we-rows { max-height: none; }
}

@media (max-width: 1100px) {
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-card.span-3, .wall-card.span-4 { grid-column: span 2; }
  /* Les trois variantes sont nommées : une règle sur « .wall-row » seul est
     moins spécifique que « .wall-row.team » et resterait sans effet. */
  .wall-row, .wall-row.team, .wall-row.trio {
    grid-template-columns: 110px 1fr 90px; font-size: 15px;
  }
  .wall-row .w-client, .wall-row .w-who:not(.big) { display: none; }
  .wall-row.team .w-bar, .wall-row.team .w-num:nth-last-child(-n+2) { display: none; }
}

/* ========================================================================== */
/*  30. IMPRESSION : ÉTIQUETTES ET BON D'INTERVENTION                         */
/* ========================================================================== */

/* Le calque d'impression est absent de l'écran et devient la seule chose
   visible sur le papier. Ni fenêtre surgissante, ni script injecté. */
#print-root { display: none; }

@media print {
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  body.printing { background: #fff; }
}

/* Les feuilles sont toujours en noir sur blanc, indépendamment du thème :
   c'est du papier, et une étiquette doit rester lisible par un lecteur de
   code-barres bon marché. */
#print-root {
  color: #000; background: #fff;
  font-family: 'Inter', Arial, sans-serif; font-size: 11pt; line-height: 1.45;
}
#print-root .sheet { padding: 10mm; }

#print-root .p-head {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px;
}
#print-root .p-brand strong { display: block; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 14pt; }
#print-root .p-brand span { font-size: 8.5pt; color: #444; }
#print-root .p-title { margin-left: auto; text-align: right; }
#print-root .p-title b { display: block; font-size: 13pt; }
#print-root .p-title span { font-size: 9pt; color: #444; }

#print-root h4 {
  font-family: 'Space Grotesk', Arial, sans-serif; font-size: 10.5pt;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid #bbb; padding-bottom: 3px; margin: 14px 0 7px; color: #000;
}
#print-root .p-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 20px; }
#print-root .p-row { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px dotted #ccc; }
#print-root .p-row .k { color: #555; width: 42%; flex: none; }
#print-root .p-row .v { font-weight: 600; }
#print-root .p-text { white-space: pre-wrap; word-break: break-word; }
#print-root table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
#print-root th, #print-root td { border: 1px solid #bbb; padding: 5px 7px; text-align: left; }
#print-root th { background: #eee; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em; }
#print-root .p-qr { float: right; margin: 0 0 8px 12px; text-align: center; }
#print-root .p-qr img { width: 32mm; height: 32mm; }
#print-root .p-qr small { display: block; font-size: 7.5pt; color: #555; }

#print-root .p-sign {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px;
  page-break-inside: avoid;
}
#print-root .p-sign > div { border: 1px solid #999; border-radius: 4px; padding: 8px 10px; height: 32mm; }
#print-root .p-sign b { display: block; font-size: 9pt; margin-bottom: 2px; }
#print-root .p-sign small { color: #555; font-size: 8pt; }
#print-root .p-foot {
  margin-top: 14px; padding-top: 8px; border-top: 1px solid #bbb;
  font-size: 8pt; color: #555;
}

/* Planche d'étiquettes : trois par ligne, format adhésif courant. */
#print-root .labels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; padding: 8mm;
}
#print-root .label {
  display: flex; align-items: center; gap: 3mm; padding: 3mm;
  border: 1px solid #999; border-radius: 2mm; height: 26mm;
  page-break-inside: avoid; overflow: hidden;
}
#print-root .label .qr { width: 20mm; height: 20mm; flex: none; }
#print-root .label .l-txt { min-width: 0; }
#print-root .label .l-txt b {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 11pt; font-weight: 600; letter-spacing: -.02em;
}
#print-root .label .l-txt span {
  display: block; font-size: 7.5pt; color: #333;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#print-root .label .l-txt .loc { font-weight: 600; }
#print-root .label .l-txt small { display: block; font-size: 6pt; color: #777; margin-top: 1mm; }

@page { size: A4; margin: 8mm; }

/* ========================================================================== */
/*  31. ÉTIQUETTE D'ÉQUIPEMENT                                                */
/* ========================================================================== */

/* Le QR est affiché sur fond blanc quel que soit le thème : c'est ce que le
   lecteur du téléphone attend, et c'est ainsi qu'il sera imprimé. */
.asset-qr {
  display: inline-grid; place-items: center; min-height: 150px;
  padding: 10px; border-radius: var(--radius-sm); background: #fff;
}
.asset-qr img { display: block; }

/* ========================================================================== */
/*  32. PORTAIL D'ACCÈS                                                       */
/* ========================================================================== */

/* Premier des deux niveaux de connexion : un bandeau qui descend du haut de
   l'écran, par-dessus un site rendu illisible. Volontairement sobre — il
   s'adresse autant à un robot qu'à un collaborateur, et ne doit rien
   raconter du contenu qu'il protège. */

body.gate-locked { overflow: hidden; }

/* Le contenu reste dans le flux (pas de display:none) pour éviter un saut de
   mise en page à l'ouverture, mais devient illisible et inatteignable. */
body.gate-locked #app,
body.gate-locked .toasts,
body.gate-locked #gdpr-root {
  filter: blur(14px) saturate(.6);
  pointer-events: none;
  user-select: none;
}

.gate-veil {
  position: fixed; inset: 0; z-index: 500;
  background: radial-gradient(120% 90% at 50% -10%, rgba(171, 85, 207, .16), transparent 60%),
              rgba(6, 3, 12, .82);
  backdrop-filter: blur(3px);
}

.gate-drop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 501;
  display: flex; justify-content: center;
  padding: 0 16px;
  animation: gate-in .42s var(--ease-back) both;
}

@keyframes gate-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gate-drop { animation: none; }
}

.gate-card {
  width: 100%; max-width: 660px;
  display: grid; gap: 14px 18px;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 22px 26px 24px;
  background: var(--solid);
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Le liseré coloré rappelle celui de la carte de connexion. */
.gate-card::before {
  content: ""; grid-column: 1 / -1;
  height: 3px; margin: -22px -26px 4px;
  background: var(--grad-2);
  border-radius: 0 0 2px 2px;
}

.gate-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 21px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-edge);
  border-radius: var(--radius-sm);
}

.gate-text h2 {
  margin: 0; font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: .3px; color: var(--dark);
}
.gate-text p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

.gate-controls {
  grid-column: 1 / -1;
  display: flex; gap: 10px;
}
.gate-controls input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 13px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.gate-controls input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.gate-controls .btn { flex: 0 0 auto; }

.gate-error {
  grid-column: 1 / -1; margin: 0;
  padding: 9px 13px; border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--red-soft); border: 1px solid var(--red-edge); color: var(--red);
}

@media (max-width: 560px) {
  .gate-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .gate-card::before { margin: -22px -26px 4px; width: calc(100% + 52px); }
  .gate-controls { flex-direction: column; width: 100%; }
}

/* Libellé réservé aux lecteurs d'écran. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ========================================================================== */
/*  DEMANDES D'ACCÈS MICROSOFT                                                */
/* ========================================================================== */

.req-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.req-card {
  border: 1px solid var(--accent-edge); border-radius: var(--radius);
  background: var(--accent-soft); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.req-card .req-head { display: flex; align-items: center; gap: 12px; }
.req-card .req-head b { font-size: 14.5px; display: block; }
.req-card .req-meta { font-size: 12px; color: var(--muted); }
.req-card .btn-row { margin-top: auto; }

/* Bandeau d'identité en tête de la fenêtre de validation. */
.req-identity {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.req-identity b { font-size: 15px; display: block; }

@media (max-width: 620px) {
  .req-grid { grid-template-columns: 1fr; }
}

/* Bandeau « demandes d'accès en attente » du tableau de bord. ---------------
   Quelqu'un attend derrière la porte : le bandeau est franc, pas discret. */
.access-alert {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid var(--accent-edge); background: var(--accent-soft);
}
.access-alert .ico {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px;
  background: var(--surface); color: var(--accent); border: 1px solid var(--accent-edge);
}
.access-alert b { font-size: 14.5px; display: block; }
.access-alert p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.access-alert .btn { margin-left: auto; }

@media (max-width: 620px) {
  .access-alert .btn { margin-left: 0; width: 100%; }
}

/* Diagnostic de la connexion Microsoft (Paramètres). ------------------------ */
.diag { display: grid; gap: 8px; }
.diag-line {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2); font-size: 13px;
}
.diag-line .mark {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px;
}
.diag-line.ok  { border-color: var(--green-edge); background: var(--green-soft); }
.diag-line.ok  .mark { background: var(--green); color: #fff; }
.diag-line.ko  { border-color: var(--red-edge); background: var(--red-soft); }
.diag-line.ko  .mark { background: var(--red); color: #fff; }
.diag-line b { display: block; font-weight: 600; }
.diag-line small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }

/* Encart « connexion par compte Microsoft » de la fenêtre Mon compte. -------- */
.ms-account {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
}
.ms-account .ico {
  width: 40px; height: 40px; flex: none; border-radius: 8px;
  display: grid; place-items: center; background: #fff;
  border: 1px solid var(--line-strong);
}
.ms-account b { font-size: 14px; display: block; }
.ms-account p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); }

.diag-titre {
  font-size: 11.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted); margin: 6px 0 2px;
}
.diag-titre:first-child { margin-top: 0; }

/* ========================================================================== */
/*  DIAGNOSTIC DE DÉMARRAGE (boot-guard.js)                                   */
/*                                                                            */
/*  Volontairement autonome : ces règles n'utilisent aucune variable de thème. */
/*  Si l'application n'a pas démarré, rien ne garantit que le reste de la      */
/*  feuille se soit appliqué.                                                 */
/* ========================================================================== */

.bg-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, #150a24 0%, #241041 55%, #3a1a63 100%);
  font-family: 'Segoe UI', Roboto, -apple-system, Helvetica, Arial, sans-serif;
}
.bg-card {
  width: 100%; max-width: 560px; background: #fff; color: #1f2937;
  border-radius: 16px; padding: 36px 34px;
  box-shadow: 0 24px 60px rgba(12, 4, 28, .5);
}
.bg-ico {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; background: #fef3c7; color: #b45309; border: 1px solid #fde68a;
  margin-bottom: 18px;
}
.bg-card h1 { margin: 0 0 12px; font-size: 20px; font-weight: 650; color: #2e1065; }
.bg-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: #4b5563; }

.bg-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.bg-list li {
  padding: 11px 14px; border-radius: 8px;
  background: #fef2f2; border: 1px solid #fecaca;
}
.bg-list code {
  display: block; font-family: Consolas, 'Courier New', monospace;
  font-size: 12.5px; color: #b91c1c; font-weight: 600; word-break: break-all;
}
.bg-list span { display: block; margin-top: 3px; font-size: 12.5px; color: #6b7280; }

.bg-aide {
  padding: 14px 16px; border-radius: 8px; margin-bottom: 18px;
  background: #f5f3ff; border: 1px solid #ddd6fe;
}
.bg-aide b { font-size: 13px; color: #5b21b6; }
.bg-aide p { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: #4b5563; }
.bg-aide code {
  font-family: Consolas, 'Courier New', monospace; font-size: 12px;
  background: #ede9fe; padding: 1px 5px; border-radius: 3px; color: #5b21b6;
}

.bg-btn {
  width: 100%; padding: 12px 20px; border: 0; border-radius: 9px; cursor: pointer;
  background: #7c3aed; color: #fff; font-size: 14.5px; font-weight: 600;
  font-family: inherit;
}
.bg-btn:hover { background: #6d28d9; }

.bg-spin {
  width: 30px; height: 30px; margin: 0 auto 16px; border-radius: 50%;
  border: 3px solid #ede9fe; border-top-color: #7c3aed;
  animation: bg-turn .7s linear infinite;
}
@keyframes bg-turn { to { transform: rotate(360deg); } }

/* Adresse de retour Entra : mise en avant, car elle doit être recopiée
   au caractère près et c'est la source d'erreur la plus fréquente. --------- */
.redirect-box {
  border: 1px solid var(--accent-edge); border-radius: var(--radius);
  background: var(--accent-soft); padding: 14px 16px;
}
.rb-titre {
  font-size: 11.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.rb-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rb-ligne code {
  flex: 1; min-width: 220px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; color: var(--accent); word-break: break-all; user-select: all;
}
.rb-aide { margin-top: 11px; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.rb-aide code {
  font-size: 12px; background: var(--surface); padding: 1px 5px;
  border-radius: 3px; color: var(--accent);
}

/* ========================================================================== */
/*  32. HIÉRARCHIE CLIENT, PRISE DE PHOTO, NOTIFICATION À L'OUVERTURE         */
/* ========================================================================== */

/* --- Sous-clients ---------------------------------------------------------
   Une agence rattachée à son enseigne est décalée dans la liste ; le chevron
   dit d'un coup d'œil qu'on lit une filiale et non une société de plus. */
.tree-mark { color: var(--faint); font-weight: 400; margin-right: 2px; }

.sm-badge { margin-left: 8px; font-size: 10.5px; vertical-align: 1px; }

/* Fil d'Ariane de la fiche : « GROUPE › RÉGION › agence ». Cliquable, parce
   que sur trois niveaux, revenir par la liste complète est une corvée. */
.client-path {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 12.5px; color: var(--muted);
}
.client-path span { color: var(--faint); }
.client-path b { color: var(--dark); font-weight: 600; }

/* --- Prise de photo -------------------------------------------------------
   Le bouton n'a de sens que là où l'appareil photo existe. Sur un poste fixe
   il ouvrirait un sélecteur de fichiers, ce que « + Ajouter » fait déjà : on
   le masque donc dès qu'un vrai pointeur est présent. */
.touch-only { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .touch-only { display: none; }
}

/* --- Notification à l'ouverture d'un ticket ------------------------------- */
.notify-box {
  margin-top: 4px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
}
.notify-box .check { margin: 0; font-weight: 600; }
.notify-box .hint { margin-top: 6px; }

/* Étiquette de champ portant une action à droite (« + Nouveau client »). */
.lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--purple-300);
  transition: color var(--fast);
}
.link-btn:hover { color: var(--accent); text-decoration: underline; }