/* =========================================================== Maintys AI · thème */
:root {
  --fond: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #eff1f7;
  --bord: #e1e4ee;
  --bord-fort: #cbd0de;
  --texte: #0e1424;
  --texte-2: #48526a;
  --texte-3: #838ca3;

  /* Marque Maintys : indigo du logo, cyan du point AI */
  --marque: #3159e8;
  --marque-2: #2643c4;
  --marque-doux: #e9eefe;
  --degrade: linear-gradient(135deg, #3b6cf6 0%, #1e2fa8 100%);
  --accent: #0891b2;
  --accent-vif: #22d3ee;
  --ombre-marque: 59 108 246;

  /* Statuts « réussi » : le vert reste le code universel du « c'est réglé » à l'atelier */
  --succes: #0b8a5c;
  --succes-2: #087049;
  --succes-doux: #e2f5ec;

  --alerte: #8a5a00;
  --alerte-fond: #fff6e0;
  --alerte-bord: #f3d48a;
  --danger: #c02634;
  --danger-fond: #fdecee;
  --info: #0e7490;
  --info-fond: #e3f6fb;

  --sb-fond: #0b0f1d;
  --sb-surface: #151b2e;
  --sb-bord: #212a42;
  --sb-texte: #e8ebf5;
  --sb-texte-2: #8a93ab;
  --sb-marque: #7c9dff;

  /* Graphiques (palette de référence validée) */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --grille: #e7e8ec;
  --axe: #c3c7cf;

  --ombre-1: 0 1px 2px rgb(15 23 32 / .06);
  --ombre-2: 0 6px 24px -8px rgb(15 23 32 / .14), 0 2px 6px rgb(15 23 32 / .04);
  --ombre-3: 0 24px 60px -12px rgb(15 23 32 / .3);
  --rayon: 16px;
  --police: "Inter", "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0a0d18; --surface: #121729; --surface-2: #191f35; --bord: #252d47; --bord-fort: #36405e;
    --texte: #eef1f8; --texte-2: #a9b1c7; --texte-3: #707a95;
    --marque: #6d8eff; --marque-2: #9cb3ff; --marque-doux: #1a2347;
    --accent: #22d3ee; --accent-vif: #22d3ee; --ombre-marque: 109 142 255;
    --succes: #2ec98a; --succes-2: #5edaa6; --succes-doux: #0f2a20;
    --alerte: #f5c76a; --alerte-fond: #2a2210; --alerte-bord: #5a4618;
    --danger: #ff6b76; --danger-fond: #331519; --info: #67c7ff; --info-fond: #10283d;
    --sb-fond: #070a14; --sb-surface: #111729; --sb-bord: #1c2440;
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --grille: #232830; --axe: #3a414d;
    --ombre-2: 0 6px 24px -8px rgb(0 0 0 / .55); --ombre-3: 0 24px 60px -12px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0a0d18; --surface: #121729; --surface-2: #191f35; --bord: #252d47; --bord-fort: #36405e;
  --texte: #eef1f8; --texte-2: #a9b1c7; --texte-3: #707a95;
  --marque: #6d8eff; --marque-2: #9cb3ff; --marque-doux: #1a2347;
  --accent: #22d3ee; --accent-vif: #22d3ee; --ombre-marque: 109 142 255;
  --succes: #2ec98a; --succes-2: #5edaa6; --succes-doux: #0f2a20;
  --alerte: #f5c76a; --alerte-fond: #2a2210; --alerte-bord: #5a4618;
  --danger: #ff6b76; --danger-fond: #331519; --info: #67c7ff; --info-fond: #10283d;
  --sb-fond: #070a14; --sb-surface: #111729; --sb-bord: #1c2440;
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --grille: #232830; --axe: #3a414d;
  --ombre-2: 0 6px 24px -8px rgb(0 0 0 / .55); --ombre-3: 0 24px 60px -12px rgb(0 0 0 / .7);
  color-scheme: dark;
}

/* =========================================================== Base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.6 var(--police); -webkit-font-smoothing: antialiased;
}
[dir="rtl"], :lang(ar) { font-family: "IBM Plex Sans Arabic", var(--police); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
code { font: 13px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); }
.ic {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.flex { flex: 1; }
.muet { color: var(--texte-3); }
.note { margin: 12px 0 0; font-size: 13px; color: var(--texte-3); }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; border-radius: 8px; }

.icone-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0;
  border: 0; border-radius: 10px; background: none; color: var(--texte-2); transition: .15s;
}
.icone-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--texte); }
.icone-btn:disabled { opacity: .35; cursor: default; }

.btn-plein, .btn-secondaire {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px;
  border-radius: 11px; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn-plein { border: 0; background: var(--degrade); color: #fff; box-shadow: 0 6px 16px -6px rgb(var(--ombre-marque) / .55); }
.btn-plein:hover { filter: brightness(1.06); }
.btn-plein:disabled { opacity: .6; cursor: wait; }
.btn-secondaire { border: 1px solid var(--bord); background: var(--surface); color: var(--texte); }
.btn-secondaire:hover { border-color: var(--bord-fort); background: var(--surface-2); }
.btn-plein .ic, .btn-secondaire .ic { width: 17px; height: 17px; }
.btn-large { width: 100%; padding: 13px; font-size: 15px; }

.select {
  height: 38px; padding: 0 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); color: var(--texte);
}
.select-petit { height: 34px; padding: 0 8px; font-size: 13.5px; }
.case { display: inline-flex; align-items: center; gap: 8px; color: var(--texte-2); font-size: 14px; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--marque); }

.logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.logo img { width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgb(var(--ombre-marque) / .4)); }
.logo-nom { font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; }
.logo-nom b { font-weight: 800; background: linear-gradient(90deg, #8aa6ff, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-sous { font-size: 12px; color: var(--sb-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================== Page de connexion */
.page-connexion { min-height: 100%; }
.connexion { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100dvh; }
.connexion-marque {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 44px 56px; overflow: hidden; color: #eef2f6;
  background: radial-gradient(1200px 600px at 10% 0%, #1b2a6b 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 100%, #0c3a4a 0%, transparent 55%), #080a0e;
}
.connexion-grille {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
}
.connexion-haut, .connexion-message, .connexion-bas { position: relative; }
.connexion-haut { display: flex; align-items: center; gap: 12px; }
.connexion-haut .logo-nom { font-size: 20px; }
.connexion-message h1 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; }
.connexion-ar { margin: 14px 0 34px; font-size: 21px; color: #8fdcf0; }
.atouts { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; max-width: 520px; }
.atouts li { display: flex; gap: 14px; align-items: flex-start; color: #a9b3c1; font-size: 14px; }
.atouts li > span {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .08); color: #7c9dff;
}
.atouts b { display: block; color: #eef2f6; font-size: 15px; font-weight: 600; }
.connexion-bas { font-size: 13px; color: #6f7a89; }

.connexion-formulaire { position: relative; display: grid; place-items: center; padding: 32px 20px; background: var(--fond); }
.carte-connexion { width: min(400px, 100%); }
.carte-connexion h2 { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.carte-connexion .sous { margin: 4px 0 28px; color: var(--texte-3); }
.logo-mobile { display: none; width: 52px; height: 52px; margin-bottom: 20px; }
.champ { display: grid; gap: 6px; margin-bottom: 16px; font-size: 13.5px; font-weight: 500; color: var(--texte-2); }
.champ small { font-weight: 400; color: var(--texte-3); }
.champ input, .champ select, .champ textarea {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--bord); border-radius: 12px;
  background: var(--surface); color: var(--texte); font-size: 15px; transition: .15s;
}
.champ input:focus, .champ select:focus { outline: none; border-color: var(--marque); box-shadow: 0 0 0 4px var(--marque-doux); }
.saisie-icone { position: relative; }
.saisie-icone > .ic { position: absolute; left: 14px; top: 13px; color: var(--texte-3); width: 19px; height: 19px; pointer-events: none; }
.saisie-icone input { padding-left: 44px; }
.voir { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--texte-3); }
.voir:hover { background: var(--surface-2); color: var(--texte); }
.erreur-connexion {
  display: flex; gap: 10px; align-items: center; margin-bottom: 16px; padding: 11px 14px;
  border-radius: 12px; background: var(--danger-fond); color: var(--danger); font-size: 14px;
}
.securite-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: 12.5px; color: var(--texte-3); }
.securite-note .ic { width: 15px; height: 15px; }
.theme-flottant { position: absolute; top: 18px; right: 18px; }

/* =========================================================== Structure de l'application */
.app { display: grid; grid-template-columns: 272px 1fr; height: 100dvh; overflow: hidden; }
.principal { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.bandeau-licence {
  display: flex; align-items: center; gap: 10px; padding: 9px 20px; flex: none; font-size: 13.5px;
  background: var(--alerte-fond); color: var(--alerte); border-bottom: 1px solid var(--alerte-bord);
}
.bandeau-licence[hidden] { display: none; }
.bandeau-licence .ic { width: 16px; height: 16px; flex: none; }
.bandeau-licence span { flex: 1; }
.bandeau-licence a { color: inherit; font-weight: 600; white-space: nowrap; }
.bandeau-licence.critique { background: var(--danger-fond); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.vue { flex: 1; min-height: 0; }

/* ---------- Barre latérale */
.sidebar {
  display: flex; flex-direction: column; gap: 16px; padding: 18px 14px 14px; min-height: 0;
  background: var(--sb-fond); color: var(--sb-texte); border-right: 1px solid var(--sb-bord);
}
.sidebar .icone-btn { color: var(--sb-texte-2); }
.sidebar .icone-btn:hover { background: var(--sb-surface); color: var(--sb-texte); }
.sb-tete { display: flex; align-items: center; gap: 12px; padding: 2px 6px; }
.sb-marque { min-width: 0; }
.sb-fermer { margin-inline-start: auto; display: none; }
.btn-nouveau {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px;
  border: 1px solid var(--sb-bord); border-radius: 12px; background: var(--sb-surface);
  color: var(--sb-texte); font-weight: 600; transition: .15s;
}
.btn-nouveau:hover { border-color: #2f3642; background: #1c212a; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; min-height: 0; }
.nav-groupe { padding: 14px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #5f6876; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px;
  color: var(--sb-texte-2); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: .15s;
}
.nav a .ic { width: 18px; height: 18px; }
.nav a:hover { background: var(--sb-surface); color: var(--sb-texte); }
.nav a.actif { background: var(--sb-surface); color: var(--sb-texte); box-shadow: inset 2px 0 0 var(--sb-marque); }
.nav a.actif .ic { color: var(--sb-marque); }
.pastille {
  margin-inline-start: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; text-align: center;
  background: var(--sb-surface); border: 1px solid var(--sb-bord); color: var(--sb-texte-2); font-size: 11.5px; font-weight: 600;
}
.sb-pied { position: relative; display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--sb-bord); }
.etat-ia { display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 12.5px; color: var(--sb-texte-2); }
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-vif); box-shadow: 0 0 0 3px rgb(34 211 238 / .18); }
.etat-ia.hors .point { background: #ff6b76; box-shadow: 0 0 0 3px rgb(255 107 118 / .18); }
.profil {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 12px;
  background: none; color: var(--sb-texte); text-align: start; transition: .15s;
}
.profil:hover { background: var(--sb-surface); }
.profil > .ic { width: 17px; height: 17px; color: var(--sb-texte-2); }
.profil-avatar, .mini-avatar {
  display: grid; place-items: center; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, #22a6d6, #3b6cf6); color: #fff; font-weight: 700;
}
.profil-avatar { width: 36px; height: 36px; font-size: 13px; }
.profil-info { display: grid; min-width: 0; flex: 1; }
.profil-nom { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profil-role { font-size: 12px; color: var(--sb-texte-2); }
.menu-profil {
  position: absolute; bottom: 60px; left: 0; right: 0; z-index: 5; padding: 6px;
  border: 1px solid var(--sb-bord); border-radius: 14px; background: var(--sb-surface); box-shadow: var(--ombre-3);
}
.menu-profil button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 9px;
  background: none; color: var(--sb-texte); font-size: 14px; text-align: start;
}
.menu-profil button .ic { width: 17px; height: 17px; color: var(--sb-texte-2); }
.menu-profil button:hover { background: #20252e; }
.menu-profil .danger, .menu-profil .danger .ic { color: #ff8a93; }
.voile { display: none; }

/* =========================================================== Conversation */
.chat { display: flex; flex-direction: column; position: relative; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; min-height: 64px;
  border-bottom: 1px solid var(--bord); background: color-mix(in srgb, var(--fond) 85%, transparent); backdrop-filter: blur(10px);
}
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; }
.select-machine {
  display: inline-flex; align-items: center; gap: 8px; max-width: 340px; height: 38px; padding: 0 6px 0 12px;
  border: 1px solid var(--bord); border-radius: 11px; background: var(--surface); color: var(--texte-2); cursor: pointer;
}
.select-machine .ic { width: 17px; height: 17px; color: var(--marque); }
.select-machine select { min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; font-weight: 500; color: var(--texte); cursor: pointer; }
.segments { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--bord); }
.segments button {
  padding: 6px 14px; border: 0; border-radius: 9px; background: none; color: var(--texte-2);
  font-size: 13.5px; font-weight: 500; transition: .15s; white-space: nowrap;
}
.segments button.actif { background: var(--surface); color: var(--texte); box-shadow: var(--ombre-1); font-weight: 600; }
#voix[aria-pressed="true"] { color: var(--marque); }

.fil { flex: 1; overflow-y: auto; padding: 28px 20px 12px; scroll-behavior: smooth; }
.fil > * { max-width: 800px; margin-inline: auto; }

.accueil { padding: 5vh 0 24px; text-align: center; animation: monte .5s ease both; }
.accueil-logo { display: inline-block; width: 68px; height: 68px; }
.accueil-logo img { width: 100%; filter: drop-shadow(0 14px 28px rgb(var(--ombre-marque) / .4)); }
.accueil h1 { margin: 20px 0 6px; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; letter-spacing: -.025em; font-weight: 800; }
.accueil h1 span { color: var(--texte-2); font-weight: 600; }
.accueil-ar { margin: 0; font-size: 20px; color: var(--texte-2); }
.accueil-sous { margin: 12px auto 28px; max-width: 480px; color: var(--texte-3); }
.suggestions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.suggestions button {
  padding: 14px 16px; border: 1px solid var(--bord); border-radius: 14px; background: var(--surface);
  color: var(--texte-2); font-size: 14px; line-height: 1.45; text-align: start; box-shadow: var(--ombre-1); transition: .15s;
}
.suggestions button:hover { border-color: var(--marque); color: var(--texte); transform: translateY(-1px); box-shadow: var(--ombre-2); }

.msg { display: flex; gap: 14px; margin-bottom: 26px; animation: monte .35s ease both; }
.msg-user { justify-content: flex-end; }
.msg-user-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(78%, 560px); }
.bulle {
  padding: 12px 16px; border-radius: 18px 18px 6px 18px; background: var(--texte); color: var(--fond);
  white-space: pre-wrap; word-wrap: break-word;
}
.bulle img { display: block; max-width: 220px; margin-bottom: 8px; border-radius: 10px; }
.bulle-machine { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texte-3); }
.bulle-machine .ic { width: 14px; height: 14px; }
.avatar { width: 34px; height: 34px; flex: none; }
.avatar img { width: 100%; filter: drop-shadow(0 4px 10px rgb(var(--ombre-marque) / .35)); }
.reponse { flex: 1; min-width: 0; }
.reponse-nom { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.reponse-nom small { color: var(--texte-3); font-weight: 400; }

.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-2); }
.reponse .carte { overflow: hidden; }
.bloc { padding: 16px 18px; }
.bloc + .bloc { border-top: 1px solid var(--bord); }
.etiquette {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3);
}
.etiquette .ic { width: 15px; height: 15px; }
.cause { font-size: 16px; line-height: 1.65; }
.securite {
  display: flex; gap: 12px; margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--alerte-bord); border-radius: 12px; background: var(--alerte-fond); color: var(--alerte);
}
.securite .ic { margin-top: 2px; }
.securite strong { display: block; font-size: 13px; }
.etapes { list-style: none; margin: 4px 0 0; padding: 0; }
.etape { display: flex; gap: 12px; align-items: flex-start; padding: 10px; margin: 0 -10px; border-radius: 10px; cursor: pointer; transition: .15s; }
.etape:hover { background: var(--surface-2); }
.etape-num {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--bord-fort); border-radius: 50%; font-size: 12.5px; font-weight: 600; color: var(--texte-2); transition: .15s;
}
.etape-num .ic { display: none; width: 15px; height: 15px; stroke-width: 2.6; }
.etape.faite .etape-num { background: var(--succes); border-color: var(--succes); color: #fff; }
.etape.faite .etape-num span { display: none; }
.etape.faite .etape-num .ic { display: block; }
.etape.faite .etape-texte { color: var(--texte-3); text-decoration: line-through; text-decoration-color: var(--bord-fort); }
.terrain { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--succes-doux); color: var(--succes-2); }
.sources { display: flex; flex-wrap: wrap; gap: 8px; }
.source {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px 7px 8px;
  border: 1px solid var(--bord); border-radius: 10px; background: var(--surface-2); color: var(--texte); font-size: 13px; transition: .15s;
}
.source:hover { border-color: var(--marque); background: var(--marque-doux); }
.source-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--surface); color: var(--marque); }
.source-ic .ic { width: 14px; height: 14px; }
.source-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.source-page { color: var(--texte-3); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--bord); background: var(--surface-2); }
.action {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--texte-2); font-size: 13.5px; font-weight: 500; transition: .15s;
}
.action:hover { background: var(--surface); color: var(--texte); }
.action .ic { width: 16px; height: 16px; }
.action.lecture { color: var(--marque); }
.action.valide { color: var(--succes); }
.introuvable { display: flex; gap: 12px; color: var(--texte-2); }
.introuvable .ic { color: var(--alerte); margin-top: 2px; }
.validation { display: grid; gap: 10px; padding: 16px 18px; border-top: 1px solid var(--bord); animation: monte .25s ease both; }
.validation textarea, .validation input:not([type="checkbox"], [type="radio"]) {
  width: 100%; padding: 11px 13px; border: 1px solid var(--bord); border-radius: 11px; background: var(--surface); resize: vertical;
}
.validation .case { justify-content: flex-start; }
.validation .form-grille .champ:last-child { margin-bottom: 0; }
.validation textarea:focus, .validation input:focus { outline: none; border-color: var(--marque); box-shadow: 0 0 0 3px var(--marque-doux); }
.validation-ligne { display: flex; gap: 10px; }
.validation-ligne input { flex: 1; }
.validation-ligne .select { flex: 1; }
.action:disabled { opacity: .45; cursor: default; }
.action:disabled:hover { background: none; color: var(--texte-2); }

/* ---------- Pannes : suivi par statut */
.segments-defilant { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segments button .compte { margin-inline-start: 6px; padding: 0 6px; border-radius: 99px; background: var(--bord); font-size: 11.5px; font-weight: 600; }
.segments button.actif .compte { background: var(--marque-doux); color: var(--marque-2); }
.pannes { display: grid; gap: 12px; max-width: 980px; }
.pannes + .btn-secondaire { justify-self: start; }
.panne { padding: 14px 18px 12px; border-inline-start: 3px solid var(--bord-fort); }
.panne-ouverte { border-inline-start-color: var(--info); }
.panne-en_cours { border-inline-start-color: var(--alerte); }
.panne-en_attente { border-inline-start-color: var(--texte-3); }
.panne-resolue { border-inline-start-color: var(--succes); }
.panne-non_resolue { border-inline-start-color: var(--danger); }
.panne-tete { display: flex; gap: 12px; align-items: flex-start; }
.panne-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; }
.panne-ic .ic { width: 17px; height: 17px; stroke-width: 2.4; }
.panne-ic.petit { width: 26px; height: 26px; border-radius: 8px; }
.panne-ic.petit .ic { width: 14px; height: 14px; }
.ton-bleu { background: var(--info-fond); color: var(--info); }
.ton-orange { background: var(--alerte-fond); color: var(--alerte); }
.ton-neutre { background: var(--surface-2); color: var(--texte-2); }
.ton-vert { background: var(--succes-doux); color: var(--succes-2); }
.ton-rouge { background: var(--danger-fond); color: var(--danger); }
.panne-titre { flex: 1; min-width: 0; }
.panne-question { display: block; margin: 7px 0 0; padding: 0; border: 0; background: none; color: var(--texte); font: inherit;
  font-size: 15px; font-weight: 600; text-align: start; cursor: pointer; }
.panne-question:hover { color: var(--marque-2); }
.panne-assigne { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; font-weight: 500; color: var(--texte-2); }
.panne-assigne .ic { width: 15px; height: 15px; }
.panne-commentaire { margin: 10px 0 0 46px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); color: var(--texte-2); font-size: 13.5px; }
.panne .evenement-solution { margin: 10px 0 0 46px; font-size: 14px; }
.panne-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0 46px; }
.panne-actions .btn-plein, .panne-actions .btn-secondaire { padding: 7px 13px; font-size: 13.5px; }
.puce-alerte { background: var(--alerte-fond); color: var(--alerte); }
.lien-carte { display: inline-block; margin-top: 30px; color: var(--marque-2); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.lien-carte:hover { text-decoration: underline; }
.suivi-panne { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.suivi-panne li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.suivi-panne li > div { display: grid; gap: 3px; }

.reflexion { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--texte-2); font-size: 14px; }
.points { display: inline-flex; gap: 4px; }
.points i { width: 7px; height: 7px; border-radius: 50%; background: var(--marque); animation: saute 1.2s infinite ease-in-out; }
.points i:nth-child(2) { animation-delay: .15s; }
.points i:nth-child(3) { animation-delay: .3s; }
.erreur-carte { display: flex; gap: 12px; padding: 14px 18px; color: var(--danger); background: var(--danger-fond); }

.composer-zone { padding: 8px 20px 16px; }
.composer {
  max-width: 800px; margin: 0 auto; padding: 10px 10px 8px 14px; border: 1px solid var(--bord);
  border-radius: 22px; background: var(--surface); box-shadow: var(--ombre-2); transition: .15s;
}
.composer:focus-within { border-color: var(--bord-fort); box-shadow: var(--ombre-2), 0 0 0 4px var(--marque-doux); }
.composer textarea {
  display: block; width: 100%; max-height: 180px; padding: 6px 4px; border: 0; outline: 0; resize: none;
  background: none; font-size: 15.5px; line-height: 1.5;
}
.composer textarea::placeholder { color: var(--texte-3); }
.composer-barre { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.composer-barre label.icone-btn { cursor: pointer; }
.btn-micro, .btn-envoyer { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; transition: .15s; }
.btn-micro { background: var(--surface-2); color: var(--texte); }
.btn-micro:hover { background: var(--bord); }
.btn-micro.actif { background: var(--danger); color: #fff; animation: pulse 1.4s infinite; }
.btn-envoyer { background: var(--texte); color: var(--fond); }
.btn-envoyer:disabled { opacity: .35; cursor: default; }
.btn-micro:disabled { opacity: .5; cursor: default; }
.ecoute { display: inline-flex; align-items: center; gap: 3px; color: var(--danger); font-size: 13px; font-weight: 500; }
.ecoute span { width: 3px; height: 14px; margin-inline-end: 1px; border-radius: 2px; background: currentColor; animation: onde 1s infinite ease-in-out; }
.ecoute span:nth-child(2) { animation-delay: .1s; }
.ecoute span:nth-child(3) { animation-delay: .2s; }
.ecoute span:nth-child(4) { animation-delay: .3s; margin-inline-end: 8px; }
.pj { display: flex; padding: 2px 0 8px; }
.pj-carte { position: relative; }
.pj-carte img { display: block; height: 64px; border-radius: 10px; border: 1px solid var(--bord); }
.pj-carte button {
  position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 22px; height: 22px;
  border: 2px solid var(--surface); border-radius: 50%; background: var(--texte); color: var(--fond); padding: 0;
}
.pj-carte .ic { width: 12px; height: 12px; stroke-width: 3; }
.mention { max-width: 800px; margin: 8px auto 0; text-align: center; font-size: 12px; color: var(--texte-3); }

/* =========================================================== Pages de gestion */
.page { display: flex; flex-direction: column; overflow: hidden; }
.page-tete {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 28px; min-height: 76px;
  border-bottom: 1px solid var(--bord); background: color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter: blur(10px);
}
.page-titres { min-width: 0; flex: 1; }
.page-titres h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 750; }
.page-titres p { margin: 2px 0 0; font-size: 13.5px; color: var(--texte-3); }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-actions label.btn-plein { cursor: pointer; }
.page-corps { flex: 1; overflow-y: auto; padding: 24px 28px 40px; }
.page-corps > div { max-width: 1240px; margin: 0 auto; display: grid; gap: 18px; }
.chargement { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 60px; color: var(--texte-3); }
.vide { padding: 28px 0; text-align: center; color: var(--texte-3); font-size: 14px; }
.vide-grand { display: grid; place-items: center; gap: 8px; padding: 70px 20px; text-align: center; color: var(--texte-3); }
.vide-grand > .ic { width: 40px; height: 40px; padding: 10px; box-sizing: content-box; border-radius: 16px; background: var(--surface-2); color: var(--texte-2); }
.vide-grand strong { font-size: 17px; color: var(--texte); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pile { display: grid; gap: 18px; align-content: start; }

.carte-graphique { padding: 20px 22px; min-width: 0; }
.graphique-tete { margin-bottom: 16px; }
.graphique-tete h2 { margin: 0; font-size: 15.5px; font-weight: 650; }
.graphique-tete p { margin: 2px 0 0; font-size: 13px; color: var(--texte-3); }

/* ---------- Tableaux */
.table-zone { overflow-x: auto; margin: 0 -22px -20px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  padding: 10px 22px; border-bottom: 1px solid var(--bord); text-align: start; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3);
}
.table td { padding: 12px 22px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .actions-ligne { text-align: end; white-space: nowrap; width: 1%; }
.table .actions-ligne > div { display: inline-flex; gap: 2px; }
.personne { display: inline-flex; align-items: center; gap: 10px; }
.mini-avatar { width: 30px; height: 30px; font-size: 11.5px; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-neutre { background: var(--surface-2); color: var(--texte-2); }
.badge-vert { background: var(--succes-doux); color: var(--succes-2); }
.badge-rouge { background: var(--danger-fond); color: var(--danger); }
.badge-orange { background: var(--alerte-fond); color: var(--alerte); }
.badge-bleu { background: var(--info-fond); color: var(--info); }
.puce {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px; border-radius: 8px;
  background: var(--surface-2); color: var(--texte-2); font-size: 12.5px; white-space: nowrap;
}
.puce .ic { width: 13px; height: 13px; }

/* ---------- Indicateurs (KPI) */
.kpi-grille { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 14px; }
.kpi-hero {
  grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px 24px;
  color: #eef2ff; border: 0; overflow: hidden; position: relative;
  background: radial-gradient(600px 300px at 100% 0%, rgb(255 255 255 / .16), transparent 60%), linear-gradient(145deg, #3b6cf6, #1a2a8f);
}
.kpi-hero-tete { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; opacity: .9; }
.kpi-hero-valeur { font-size: clamp(44px, 5vw, 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.kpi-hero-valeur span { font-size: .4em; font-weight: 700; opacity: .85; letter-spacing: 0; }
.kpi-hero-detail { font-size: 13px; line-height: 1.5; opacity: .85; }
.kpi { padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.kpi-tete { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--texte-3); font-weight: 500; }
.kpi-tete .ic { width: 17px; height: 17px; color: var(--texte-3); }
.kpi-valeur { font-size: 28px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.kpi-detail { font-size: 12.5px; color: var(--texte-3); }

/* ---------- Graphiques */
.graphique { width: 100%; min-height: 240px; }
.svg-graphique { display: block; width: 100%; height: 240px; overflow: visible; }
.svg-graphique .grille { stroke: var(--grille); stroke-width: 1; }
.svg-graphique .axe { stroke: var(--axe); stroke-width: 1; }
.svg-graphique .tick { fill: var(--texte-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.svg-graphique .barre { fill: var(--serie-1); transition: opacity .15s; }
.svg-graphique .cible { fill: transparent; }
.svg-graphique:hover .barre { opacity: .55; }
.svg-graphique .cible:hover { fill: color-mix(in srgb, var(--serie-1) 8%, transparent); }

.barres { display: grid; gap: 10px; }
.barre-ligne { display: grid; grid-template-columns: minmax(90px, 38%) 1fr; align-items: center; gap: 12px; padding: 3px 0; border-radius: 8px; }
.barre-libelle { font-size: 13.5px; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-libelle.code { font: 600 13px ui-monospace, Consolas, monospace; color: var(--texte); }
.barre-piste { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barre-remplie { height: 14px; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--serie-1); transition: opacity .15s; }
.barres:hover .barre-remplie { opacity: .55; }
.barre-ligne:hover .barre-remplie { opacity: 1; }
.barre-valeur { font-size: 12.5px; font-weight: 600; color: var(--texte-2); font-variant-numeric: tabular-nums; }

.repartition .empile { display: flex; gap: 2px; height: 18px; }
.empile .segment { min-width: 4px; transition: opacity .15s; }
.empile .segment:first-child { border-radius: 4px 0 0 4px; }
.empile .segment:last-child { border-radius: 0 4px 4px 0; }
.empile:hover .segment { opacity: .55; }
.empile .segment:hover { opacity: 1; }
.serie-1, .pastille-serie.serie-1 { background: var(--serie-1); }
.serie-2, .pastille-serie.serie-2 { background: var(--serie-2); }
.serie-3, .pastille-serie.serie-3 { background: var(--serie-3); }
.legende { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.legende li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texte-2); }
.legende b { margin-inline-start: auto; color: var(--texte); font-variant-numeric: tabular-nums; }
.pastille-serie { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 3px; background: var(--serie-1); vertical-align: -1px; }
.infobulle {
  position: fixed; top: 0; left: 0; z-index: 60; display: grid; gap: 2px; padding: 10px 12px; max-width: 280px;
  border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); box-shadow: var(--ombre-3);
  font-size: 13px; pointer-events: none;
}
.infobulle strong { text-transform: capitalize; }

/* ---------- Historique (chronologie) */
.chronologie { display: grid; gap: 14px; position: relative; max-width: 860px; }
.chronologie::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--bord); }
.evenement { display: grid; grid-template-columns: 32px 1fr; gap: 14px; position: relative; }
.evenement-point { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 14px; border-radius: 50%; background: var(--succes); color: #fff; box-shadow: 0 0 0 4px var(--fond); }
.evenement-point .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.evenement-corps { padding: 14px 18px; }
.evenement-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texte-3); }
.evenement-question { margin: 8px 0 6px; font-weight: 600; }
.evenement-solution { display: flex; gap: 8px; color: var(--succes-2); }
.evenement-solution .ic { width: 17px; height: 17px; margin-top: 3px; }

/* ---------- Manuels */
.grille-manuels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.manuel-carte { overflow: hidden; display: flex; flex-direction: column; }
.manuel-apercu { height: 170px; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--bord); cursor: pointer; }
.manuel-apercu img { display: block; width: 86%; margin: 16px auto 0; border-radius: 6px 6px 0 0; background: #fff; box-shadow: var(--ombre-2); transition: transform .3s; }
.manuel-carte:hover .manuel-apercu img { transform: translateY(-4px); }
.manuel-details { display: grid; gap: 6px; padding: 14px 16px; flex: 1; }
.manuel-titre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manuel-meta { font-size: 13px; color: var(--texte-3); }
.manuel-machines { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.manuel-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* ---------- Utilisateurs */
.roles-resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.role-carte { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 16px 18px; align-items: center; }
.role-carte b { display: block; font-size: 24px; line-height: 1.1; }
.role-carte span { font-size: 13.5px; color: var(--texte-2); }
.role-carte p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12.5px; color: var(--texte-3); }
.role-icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.role-technicien { background: var(--marque-doux); color: var(--marque-2); }
.role-responsable { background: var(--info-fond); color: var(--info); }
.role-admin { background: var(--alerte-fond); color: var(--alerte); }

/* ---------- Paramètres */
.grille-parametres { align-items: start; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.infos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.infos dt { color: var(--texte-3); }
.infos dd { margin: 0; font-weight: 500; }
.liste-securite { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--texte-2); }
.liste-securite li { display: flex; gap: 10px; align-items: center; }
.liste-securite .ic { width: 17px; height: 17px; color: var(--succes); }

.licence { display: grid; gap: 16px; justify-items: start; }
.licence > .infos { width: 100%; }
.licence-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.licence-modules { display: flex; flex-wrap: wrap; gap: 6px; }
.licence-module { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px;
  background: var(--marque-doux); color: var(--marque-2); }
.licence-module .ic { width: 13px; height: 13px; }
.licence-module.absent { background: var(--surface-2); color: var(--texte-3); }
.licence label.btn-secondaire { cursor: pointer; }
.licence .note { margin: 0; }

/* ---------- Savoir-faire et vidéos */
.pastille.alerte { background: #3a2a0c; border-color: #5a4618; color: #f5c76a; }
.barre-filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.recherche { flex: 1; max-width: 360px; min-width: 200px; }
.grille-savoirs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.savoir-carte { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; transition: .15s; }
.savoir-carte:hover { border-color: var(--bord-fort); transform: translateY(-2px); }
.savoir-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.savoir-video video { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.savoir-video .lecture {
  position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: rgb(255 255 255 / .92); color: #0f1720; box-shadow: 0 8px 24px rgb(0 0 0 / .35);
}
.savoir-video .lecture .ic { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.savoir-video .vu {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: 99px; background: var(--succes); color: #fff; font-size: 12px; font-weight: 600;
}
.savoir-video .vu .ic { width: 13px; height: 13px; stroke-width: 3; }
.savoir-corps { display: grid; gap: 8px; padding: 16px 18px; flex: 1; align-content: start; }
.savoir-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.savoir-corps h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.35; letter-spacing: -.01em; }
.savoir-symptome { margin: 0; font-size: 13.5px; color: var(--texte-3); }
.savoir-solution { margin: 0; font-size: 14px; color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.savoir-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--bord); background: var(--surface-2); }
.personne-texte { display: grid; line-height: 1.3; }
.personne-texte b { font-size: 13.5px; }
.personne-texte small { font-size: 12px; color: var(--texte-3); }
.savoir-stats { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--marque); }
.savoir-stats .ic { width: 15px; height: 15px; }

.bandeau-info { display: flex; align-items: flex-start; gap: 13px; padding: 14px 18px; margin-bottom: 18px; border-radius: 14px;
  background: var(--info-fond); border: 1px solid color-mix(in srgb, var(--info) 28%, transparent); }
.bandeau-info > .ic { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--info); }
.bandeau-info-texte { font-size: 13.5px; line-height: 1.55; color: var(--texte-2); }
.bandeau-info-texte p { margin: 0; }
.bandeau-info strong { color: var(--texte); }
.bandeau-info-texte a { color: var(--marque-2); font-weight: 600; text-decoration: none; }
.bandeau-info-texte a:hover { text-decoration: underline; }
.bandeau-info.ton-alerte { background: var(--alerte-fond); border-color: color-mix(in srgb, var(--alerte) 30%, transparent); }
.bandeau-info.ton-alerte > .ic { color: var(--alerte); }
.bandeau-info.ton-danger { background: var(--danger-fond); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.bandeau-info.ton-danger > .ic { color: var(--danger); }
.form-grille > .bandeau-info { margin-bottom: 16px; }
.kpi-grille > .bandeau-info { margin-bottom: 0; }
/* Tableau de bord complet (8 tuiles) : 4 tuiles par rangée à droite du bloc « Gains » */
@media (min-width: 1101px) {
  .kpi-grille:has(> .kpi:nth-of-type(8)) { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
}
.champ { align-content: start; }

/* =========================================================== Maintenance préventive */
.pastille.danger { background: #c02634; border-color: #c02634; color: #fff; }
.grille-kpi-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi-danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--bord)); }
.kpi-danger .kpi-valeur, .kpi-danger .kpi-tete .ic { color: var(--danger); }
.prev-liste { display: grid; }
.prev-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--bord); }
.prev-ligne:first-child { border-top: 0; padding-top: 2px; }
.prev-info { min-width: 0; }
.prev-info > strong { display: block; font-size: 15px; font-weight: 600; }
.prev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: 12.5px; color: var(--texte-3); }
.prev-meta > span:not(.badge):not(.puce) { display: inline-flex; align-items: center; gap: 5px; }
.prev-meta .ic { width: 14px; height: 14px; }
.prev-droite { display: flex; align-items: center; gap: 12px; flex: none; }
a.puce { text-decoration: none; }
a.puce:hover { color: var(--marque-2); }
.constat { display: grid; gap: 4px; justify-items: start; max-width: 320px; font-size: 13px; }
.form-grille > .securite { margin: 0 0 16px; }
.securite span { display: block; font-size: 13.5px; color: var(--texte-2); white-space: pre-wrap; }
.bloc-etapes { margin-bottom: 16px; padding: 12px 14px 6px; border: 1px solid var(--bord); border-radius: 12px; }
.bloc-etapes .etapes { margin-top: 6px; }
.champ-micro { position: relative; }
.champ-micro textarea { padding-inline-end: 52px; }
.champ-micro .btn-micro { position: absolute; top: 30px; inset-inline-end: 8px; width: 36px; height: 36px; }
.frequence { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.frequence input { min-width: 0; }

.depart-preventif { display: grid; gap: 18px; }
.depart-tete h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.depart-tete p { margin: 4px 0 0; color: var(--texte-3); }
.options-depart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.option-depart { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 22px; }
.option-depart strong { font-size: 16px; }
.option-depart p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--texte-2); }
.option-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--marque-doux); color: var(--marque-2); }
.option-ic .ic { width: 20px; height: 20px; }

.consignes-import { margin: 0 0 16px; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--texte-2); }
.consignes-import a { color: var(--marque-2); font-weight: 600; }
.resume-import { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.table-import { max-height: 46vh; overflow: auto; border: 1px solid var(--bord); border-radius: 12px; }
.table-import .table-zone { margin: 0; }
.table-import .table th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.table-import .table td, .table-import .table th { padding: 9px 14px; }
.statut-import { display: grid; gap: 3px; justify-items: start; }
.statut-import small { font-size: 12px; color: var(--texte-3); max-width: 280px; }

.propositions { display: grid; gap: 10px; max-height: 48vh; overflow: auto; padding-inline-end: 2px; }
.proposition { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 12px; cursor: pointer; transition: .15s; }
.proposition:hover { border-color: var(--bord-fort); }
.proposition:has(> input:checked) { border-color: color-mix(in srgb, var(--marque) 55%, var(--bord)); background: var(--marque-doux); }
.proposition > input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--marque); }
.proposition-corps { display: grid; gap: 6px; min-width: 0; flex: 1; }
.proposition-corps > strong { font-size: 14.5px; }
.proposition-frequence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.proposition-frequence .frequence { grid-template-columns: 72px 120px; }
.proposition-frequence input { height: 34px; padding: 0 8px; border: 1px solid var(--bord-fort); border-radius: 8px; background: var(--surface); color: var(--texte); font: inherit; }
.a-completer { color: var(--alerte); font-size: 12.5px; }

.calendrier-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.calendrier-nav strong { font-size: 15px; min-width: 190px; text-align: center; }
.calendrier-nav .btn-secondaire { margin-inline-start: auto; }
.calendrier-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.calendrier-jour { display: grid; gap: 8px; align-content: start; padding: 10px; border: 1px solid var(--bord); border-radius: 12px; background: var(--surface); min-height: 140px; }
.calendrier-jour.aujourd-hui { border-color: var(--marque); box-shadow: 0 0 0 1px var(--marque); }
.calendrier-entete { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--texte-3); text-transform: capitalize; }
.calendrier-entete b { font-size: 13px; color: var(--texte); }
.calendrier-taches { display: grid; gap: 6px; }
.calendrier-tache {
  display: grid; gap: 2px; padding: 7px 9px; border: 0; border-radius: 9px; background: var(--marque-doux); color: var(--texte);
  font: inherit; text-align: start; cursor: pointer; transition: .15s;
}
.calendrier-tache:hover { filter: brightness(0.97); }
.calendrier-tache span { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.calendrier-tache small { font-size: 11px; color: var(--texte-3); }
.calendrier-tache.en-retard { background: var(--danger-fond); }
.calendrier-tache.en-retard span { color: var(--danger); }
.calendrier-vide { font-size: 12px; color: var(--texte-3); }

.parcours { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: linear-gradient(135deg, var(--info-fond), var(--surface)); }
.parcours-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--info); color: #fff; }
.parcours-texte { display: grid; flex: 1; }
.parcours-texte span { font-size: 13.5px; color: var(--texte-2); }
.progression { width: min(260px, 40%); height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--bord); }
.progression > div { height: 100%; border-radius: 99px; background: var(--degrade); transition: width .3s; }
.form-grille > .progression { width: 100%; margin-bottom: 14px; }

.fiche { display: grid; gap: 14px; }
.fiche-video { width: 100%; max-height: 60vh; border-radius: 12px; background: #000; }
.fiche-bloc span { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); }
.fiche-bloc p { margin: 2px 0 0; font-size: 15px; white-space: pre-wrap; }
.fiche .securite { margin-top: 0; }
.fiche-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 12px; border-top: 1px solid var(--bord); font-size: 13px; color: var(--texte-3); }
.fiche-meta span { display: inline-flex; align-items: center; gap: 6px; }
.fiche-meta .ic { width: 15px; height: 15px; }
.spectateurs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.modal-actions .btn-secondaire:first-child { margin-inline-end: auto; }

.recit { padding: 14px; margin-bottom: 16px; border-radius: 14px; background: var(--marque-doux); }
.recit .champ { margin-bottom: 10px; }
.recit-actions { display: flex; gap: 8px; align-items: center; }
.recit .btn-micro.actif { background: var(--danger); color: #fff; animation: pulse 1.4s infinite; }
.champ textarea { height: auto; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.grille-2.serre { gap: 0 14px; }
.zone-video {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 12px; border: 1.5px dashed var(--bord-fort);
  border-radius: 14px; color: var(--texte-2); cursor: pointer; transition: .15s;
}
.zone-video:hover { border-color: var(--marque); color: var(--marque); }
.zone-video > .ic { width: 26px; height: 26px; }
.zone-video span { display: grid; }
.zone-video small { color: var(--texte-3); font-size: 12.5px; }
.video-apercu { display: grid; gap: 6px; margin-bottom: 12px; }
.video-apercu:empty { display: none; }
.video-apercu video { width: 100%; max-height: 220px; border-radius: 10px; background: #000; }

.savoirs-utilises { display: grid; gap: 8px; }
.savoir-puce {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 12px;
  background: linear-gradient(135deg, var(--alerte-fond), var(--surface)); color: var(--texte); text-align: start; transition: .15s;
}
.savoir-puce:hover { border-color: var(--alerte-bord); }
.savoir-puce-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: #f3b13b; color: #3a2600; }
.savoir-puce-ic .ic { width: 17px; height: 17px; }
.savoir-puce-texte { display: grid; min-width: 0; }
.savoir-puce-texte b { font-size: 14px; }
.savoir-puce-texte small { font-size: 12.5px; color: var(--texte-3); }
.savoir-puce.non-valide { background: var(--surface-2); }
.savoir-puce.non-valide .savoir-puce-ic { background: var(--bord); color: var(--texte-2); }
.avis { display: inline-flex; gap: 2px; }
.avis .icone-btn { width: 34px; height: 34px; }
.avis .icone-btn .ic { width: 17px; height: 17px; }
.avis .choisi { background: var(--marque-doux); color: var(--marque); }
.proposition-savoir {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--bord);
  background: var(--alerte-fond); color: var(--alerte); animation: monte .25s ease both;
}
.proposition-savoir > div { flex: 1; font-size: 14px; }
.proposition-savoir > .ic { width: 22px; height: 22px; }

.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini-kpi { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.mini-kpi-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--surface); color: var(--marque); }
.mini-kpi-ic .ic { width: 16px; height: 16px; }
.mini-kpi b { display: block; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.mini-kpi span { display: block; font-size: 12px; color: var(--texte-3); line-height: 1.35; }
.mini-kpi small { font-size: 11.5px; color: var(--texte-3); }
.top-fiches { margin-top: 18px; }
.top-fiche { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--bord); font-size: 14px; }
.top-fiche b { font-variant-numeric: tabular-nums; color: var(--marque); }

/* =========================================================== Fenêtres modales */
.modal {
  width: min(480px, calc(100% - 32px)); max-height: 86vh; padding: 0; border: 1px solid var(--bord);
  border-radius: 20px; background: var(--surface); color: var(--texte); box-shadow: var(--ombre-3);
}
.modal.large { width: min(720px, calc(100% - 32px)); }
.modal::backdrop { background: rgb(8 10 14 / .6); backdrop-filter: blur(4px); }
.modal[open] { animation: monte .25s ease both; }
.modal-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.modal-tete h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; letter-spacing: -.01em; }
.modal-tete h2 .ic { color: var(--marque); }
.modal-sous { margin: 6px 22px 0; color: var(--texte-3); font-size: 14px; }
.modal-corps { padding: 18px 22px 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 22px; }
.form-grille { display: grid; }
.form-grille .champ { margin-bottom: 14px; }
.form-grille > .case { margin: 0 0 16px; }
.form-grille > .btn-plein { justify-self: start; margin-top: 4px; }
.acces { display: grid; gap: 12px; }
.acces > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.acces span { font-size: 13.5px; color: var(--texte-2); }
.acces code { font-size: 15px; font-weight: 600; background: var(--surface); }

/* =========================================================== Visionneuse de page */
.panneau {
  position: fixed; inset: 0 0 0 auto; z-index: 30; display: flex; flex-direction: column;
  width: min(580px, 100%); background: var(--surface); border-left: 1px solid var(--bord); box-shadow: var(--ombre-3);
  transform: translateX(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.panneau.ouvert { transform: none; }
.panneau-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bord); }
.panneau-doc { font-weight: 600; font-size: 14px; word-break: break-all; }
.panneau-page { color: var(--texte-3); font-size: 13px; }
.panneau-nav { display: flex; gap: 2px; margin-inline-start: auto; }
.panneau-extrait {
  margin: 14px 16px 0; padding: 10px 14px; border-inline-start: 3px solid var(--marque);
  border-radius: 0 10px 10px 0; background: var(--marque-doux); color: var(--texte); font-size: 14px;
}
.panneau-extrait:empty { display: none; }
.panneau-image { flex: 1; overflow: auto; padding: 16px; }
.panneau-image img { display: block; width: 100%; border-radius: 8px; background: #fff; box-shadow: var(--ombre-2); }

/* =========================================================== Workflow maintenance : priorité, arrêt, clôture, pièces */
.panne-urgente { border-inline-start-color: var(--danger); box-shadow: var(--ombre-1), inset 3px 0 0 var(--danger); }
.puce-arret { background: var(--danger-fond); color: var(--danger); font-weight: 600; }
.puce-lien { text-decoration: none; transition: .15s; }
.puce-lien:hover { background: var(--marque-doux); color: var(--marque-2); }
.texte-arret { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-weight: 600; }
.texte-arret .ic { width: 13px; height: 13px; }
.texte-succes { color: var(--succes-2); }
.bloc-urgence { display: grid; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--bord); border-radius: 12px; background: var(--surface-2); }
.validation .bloc-urgence { margin-bottom: 0; }
.bloc-urgence .champ { margin-bottom: 0; }
.case-arret .ic, .case .ic { width: 16px; height: 16px; color: var(--texte-3); }
.case-arret input:checked ~ .ic { color: var(--danger); }
.priorite-apercu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.case-securite { align-items: flex-start; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 12px; background: var(--danger-fond); color: var(--texte); line-height: 1.45; }
.case-securite .ic { margin-top: 2px; color: var(--danger); }
.case-securite[hidden] { display: none; }
.case small { font-size: 12.5px; }
.pieces-conso { display: grid; gap: 8px; padding: 12px 14px; margin-bottom: 16px; border: 1px dashed var(--bord-fort); border-radius: 12px; }
.pieces-lignes { display: grid; gap: 8px; }
.piece-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(110px, auto) 34px; align-items: center; gap: 8px; }
.piece-ligne .select { min-width: 0; }
.piece-ligne .qte { height: 40px; padding: 0 10px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface);
  color: var(--texte); font: inherit; text-align: center; }
.piece-stock { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texte-3); white-space: nowrap; }
.piece-stock.manque { color: var(--alerte); font-weight: 600; }
.btn-lien { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none;
  color: var(--marque-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn-lien .ic { width: 15px; height: 15px; }
.btn-lien:hover { text-decoration: underline; }
.petit { font-size: 12.5px; }
.total-pieces { margin-top: 8px; text-align: end; font-size: 14px; color: var(--texte-2); }
.lien-ligne { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.lien-ligne:hover strong { color: var(--marque-2); text-decoration: underline; }
.grille-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; margin-bottom: 18px; }

/* ---------- Parc machines et fiche machine */
.col-case { width: 36px; }
.col-case input { width: 17px; height: 17px; accent-color: var(--marque); }
.lien-machine { color: inherit; text-decoration: none; }
.lien-machine:hover strong { color: var(--marque-2); text-decoration: underline; }
.lien-machine .muet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.code-machine { padding: 1px 7px; border-radius: 6px; background: var(--marque-doux); color: var(--marque-2);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.criticite { font-variant-numeric: tabular-nums; }
.fiche-machine-tete { display: grid; gap: 16px; margin-bottom: 18px; }
.fiche-machine-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actions-rapides { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.action-rapide { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; border: 1px solid var(--bord);
  border-radius: 16px; background: var(--surface); color: var(--texte); font: inherit; text-align: start; cursor: pointer;
  box-shadow: var(--ombre-1); transition: .15s; }
.action-rapide:hover { border-color: var(--marque); box-shadow: var(--ombre-2); }
.action-rapide > .ic { flex: none; width: 24px; height: 24px; padding: 10px; box-sizing: content-box; border-radius: 12px;
  background: var(--marque-doux); color: var(--marque-2); }
.action-rapide span { display: grid; gap: 2px; min-width: 0; }
.action-rapide strong { font-size: 15.5px; }
.action-rapide small { overflow: hidden; color: var(--texte-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.action-rapide.principale { border: 0; background: var(--degrade); color: #fff; box-shadow: 0 8px 24px rgb(var(--ombre-marque) / .3); }
.action-rapide.principale > .ic { background: rgb(255 255 255 / .18); color: #fff; }
.action-rapide.principale small { color: rgb(255 255 255 / .8); }
.kpi-grille-machine { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); grid-template-rows: auto; margin-bottom: 18px; }
.titre-section { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 16px; }
.titre-section .ic { width: 18px; height: 18px; color: var(--marque); }
.choix-format { display: grid; gap: 10px; }
.choix-carte { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--bord); border-radius: 12px; cursor: pointer; }
.choix-carte:has(input:checked) { border-color: var(--marque); background: var(--marque-doux); }
.choix-carte input { margin-top: 3px; accent-color: var(--marque); }
.choix-carte span { display: grid; gap: 2px; }
.choix-carte small { color: var(--texte-3); }

/* =========================================================== Notifications */
.toasts { position: fixed; bottom: 20px; left: 50%; z-index: 70; display: grid; gap: 8px; transform: translateX(-50%); }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; max-width: min(520px, 90vw);
  background: var(--texte); color: var(--fond); font-size: 14px; box-shadow: var(--ombre-3); animation: monte .25s ease both;
}
.toast.erreur { background: var(--danger); color: #fff; }

/* =========================================================== Animations */
@keyframes monte { from { opacity: 0; transform: translateY(8px); } }
@keyframes saute { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(192 38 52 / .45); } 50% { box-shadow: 0 0 0 8px rgb(192 38 52 / 0); } }
@keyframes onde { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* =========================================================== Tablette et mobile */
@media (max-width: 1100px) {
  .kpi-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-hero { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 960px) {
  .connexion { grid-template-columns: 1fr; }
  .connexion-marque { display: none; }
  .logo-mobile { display: grid; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: 290px;
    transform: translateX(-105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .sidebar.ouvert { transform: none; box-shadow: var(--ombre-3); }
  .sb-fermer, .menu-btn { display: inline-grid; }
  .voile { position: fixed; inset: 0; z-index: 35; background: rgb(8 10 14 / .5); }
  .voile.ouvert { display: block; }
  .grille-2, .roles-resume { grid-template-columns: 1fr; }
  .grille-kpi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .options-depart { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
  .select-machine { order: 3; flex: 1 1 100%; max-width: none; }
  .segments button { padding: 6px 10px; font-size: 13px; }
  .fil { padding: 18px 16px 8px; }
  .composer-zone { padding: 6px 12px 12px; }
  .suggestions { grid-template-columns: 1fr; }
  .msg-user-col { max-width: 88%; }
  .avatar { display: none; }
  .validation-ligne { flex-direction: column; }
  .panne-tete { flex-wrap: wrap; }
  .panne-assigne { width: 100%; margin-left: 46px; }
  .panne-commentaire, .panne .evenement-solution, .panne-actions { margin-left: 0; }
  .source-nom { max-width: 140px; }
  .page-tete { padding: 14px 16px; }
  .page-corps { padding: 16px 16px 32px; }
  .kpi-grille { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mini-kpis { grid-template-columns: 1fr 1fr; }
  .prev-ligne { flex-direction: column; align-items: stretch; }
  .prev-droite { justify-content: space-between; }
  .calendrier-grille { grid-template-columns: 1fr; }
  .calendrier-nav strong { min-width: 0; flex: 1; }
  .parcours { flex-wrap: wrap; }
  .progression { width: 100%; }
  .proposition-savoir { flex-wrap: wrap; }
  .kpi-valeur { font-size: 23px; }
  .carte-graphique { padding: 16px; }
  .table-zone { margin: 0 -16px -16px; }
  .table th, .table td { padding: 10px 16px; }
  .piece-ligne { grid-template-columns: minmax(0, 1fr) 70px 34px; }
  .piece-stock { grid-column: 1 / -1; grid-row: 2; }
  .grille-kpi-3 { grid-template-columns: 1fr; }
}