/* ---------------------------------------------------------------------------
   CONSOLE IAbot — feuille de style de la façade.

   IDENTITÉ IAbot — la référence de palette de cette feuille EST l'identité
   IAbot (marine #091930, cyan #48f0f8 en ACCENT, bleu cliquable #085078,
   blanc). Elle REMPLACE l'ancienne maquette
   (`/home/cokoroddy/Bureau/console-mockup/console-docteur-high-tech.html`),
   qui ne fait plus foi : le banc de la navigation compare désormais à
   `bancs/reference-identite-iabot.css`.

   Le cyan #48f0f8 est TRÈS clair : il est illisible comme texte ou comme
   bouton sur blanc (1.39:1). Il ne sert donc que de TOUCHE, uniquement sur le
   marine (12.65:1) ; tout ce qui se clique prend le bleu #085078 (8.65:1 sur
   blanc). On a gardé les composants, la typographie et le rythme de la
   maquette, et rapatrié les polices en local.

   AUCUNE RESSOURCE EXTERNE : tout est servi par l'application elle-même.
   --------------------------------------------------------------------------- */

/* --- Polices embarquées, extraites de la maquette (servies localement) --- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/polices/bricolage-grotesque-400-800.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/polices/instrument-sans-400-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/polices/plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/polices/plex-mono-500.woff2) format('woff2')}

/* Le cyan de la marque est une TOUCHE, jamais du texte ni un bouton :
   12.65:1 sur le marine, mais 1.39:1 sur blanc. */
:root{
  --ink:#091930; --petrol:#0c2340; --petrol-2:#12395f; --petrol-3:#1d5fa6;
  --sterile:#f3f7fc; --sterile-2:#e2ebf7; --paper:#ffffff;
  --line:#cfdfee; --line-strong:#a6c0dc; --text:#0a1f38; --muted:#4f6a8c;
  --signal:#085078; --signal-dark:#063d5c; --signal-ink:#085078; --cyan:#48f0f8;
  --vital:#0b7a58; --vital-ink:#0b7d61;
  --amber:#a86800; --amber-ink:#8a5500;
  --info:#1d5fa6; --alert-ink:#b3261e; --alert-line:#f0c9c6; --alert-bg:#fdecea;
  --ok-line:#bfe3d3; --ok-bg:#e9f6f0;
  --warn-line:#f0dcb4; --warn-bg:#fdf5e6;
  --radius:14px; --radius-sm:9px; --tap:44px;
  --shadow:0 1px 2px rgba(9,25,48,.05),0 8px 24px -14px rgba(9,25,48,.28);
  --shadow-lg:0 2px 4px rgba(9,25,48,.06),0 26px 60px -28px rgba(9,25,48,.45);
  --display:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sterile);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.022em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(1.7rem,3vw,2.25rem)}
h2{font-size:1.24rem;letter-spacing:-.012em}
h3{font-size:1.03rem;font-weight:700}
p{margin:0 0 .85em}
p:last-child{margin-bottom:0}
a{color:var(--signal-ink);text-underline-offset:3px;text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px;border-radius:4px}
/* Sur la barre MARINE, l'anneau bleu sombre serait invisible : l'accent cyan
   y prend le relais (12.65:1) — le focus reste voyant partout. */
.espace__barre :focus-visible{outline-color:var(--cyan)}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;z-index:60;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.small{font-size:.9rem}
.tiny{font-size:.78rem;color:var(--muted)}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rule{display:block;width:30px;height:2px;background:var(--signal);border-radius:2px;margin:0 0 .75rem}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* --- Boutons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--body);font-size:.92rem;font-weight:600;line-height:1;letter-spacing:.005em;padding:.62em 1.05em;min-height:40px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--sterile-2);color:var(--ink);cursor:pointer;text-decoration:none;transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn:hover{background:#d5e2f2}
.btn--sm{font-size:.85rem;padding:.5em .8em;min-height:36px}
.btn--block{width:100%}
.btn--primary{background:var(--signal-ink);color:#fff}
.btn--primary:hover{background:var(--signal-dark)}
.btn--dark{background:var(--ink);color:#eaf1fb}
.btn--dark:hover{background:var(--petrol)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--petrol-2)}
.btn--ghost:hover{background:#eaf1fb;border-color:var(--petrol-3)}
.btn--onink{background:rgba(255,255,255,.12);color:#eaf1fb;border-color:rgba(255,255,255,.22)}
.btn--onink:hover{background:rgba(255,255,255,.2)}
.btn--danger{background:transparent;border-color:var(--alert-line);color:var(--alert-ink)}
.btn--danger:hover{background:var(--alert-bg)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.5em}

/* --- Pastilles d'état --------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:.28em .6em;border-radius:999px;border:1px solid var(--line-strong);background:var(--sterile-2);color:var(--petrol-2);white-space:nowrap}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pill--ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--vital-ink)}
.pill--stop{background:#eef2f7;border-color:var(--line-strong);color:var(--muted)}
.pill--stop::before{background:transparent;border:1.5px solid currentColor}
.pill--warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--amber-ink)}
.pill--alert{background:var(--alert-bg);border-color:var(--alert-line);color:var(--alert-ink)}

/* --- Encarts ------------------------------------------------------------ */
.notice{display:flex;flex-direction:column;gap:.2em;padding:.8em 1em;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);font-size:.92rem;margin:0 0 1rem}
.notice strong{font-weight:600}
.notice--alert{background:var(--alert-bg);border-color:var(--alert-line)}
.notice--alert strong{color:var(--alert-ink)}
.notice--warn{background:var(--warn-bg);border-color:var(--warn-line)}
.notice--warn strong{color:var(--amber-ink)}
.notice--ok{background:var(--ok-bg);border-color:var(--ok-line)}
.notice--ok strong{color:var(--vital-ink)}
.notice--info{background:#eaf1fb;border-color:var(--line-strong)}
.notice--info strong{color:var(--petrol-2)}

/* --- Panneaux ----------------------------------------------------------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.panel__head h2,.panel__head h3{margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start}
.stack{display:flex;flex-direction:column;gap:1.1rem}

/* --- Cartes d'indicateur ------------------------------------------------ */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:0 0 1.1rem}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:var(--shadow)}
.kpi__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.kpi__value{font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi__hint{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.kpi--alert .kpi__value{color:var(--alert-ink)}

/* --- Tableaux ----------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
table.data{width:100%;border-collapse:collapse;font-size:.9rem}
table.data caption{text-align:left;padding:.85rem 1rem .2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
table.data th{position:sticky;top:0;background:var(--ink);color:#eaf1fb;text-align:left;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:.6rem .8rem;white-space:nowrap}
table.data td{border-bottom:1px solid var(--line);padding:.7rem .8rem;vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:nth-child(even) td{background:#f8fbfe}
table.data tr.is-degraded td{background:#fdf3f2}
table.data tr.is-degraded:nth-child(even) td{background:#fceeec}
.cell-name{font-weight:600;display:block}
.cell-sub{display:block;font-size:.76rem;color:var(--muted)}
.actions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
table.data td:last-child{white-space:nowrap}

/* --- Mini jauges -------------------------------------------------------- */
.mini{display:inline-flex;align-items:center;gap:.5em;min-width:110px}
.mini__track{position:relative;flex:1 1 auto;height:6px;min-width:38px;border-radius:99px;background:var(--sterile-2);overflow:hidden}
.mini__fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--petrol-3)}
.mini__fill.is-high{background:var(--amber)}
.mini__fill.is-max{background:var(--alert-ink)}
.mini__val{font-family:var(--mono);font-size:.76rem;white-space:nowrap;color:var(--text)}

/* --- Grandes jauges (consommation) -------------------------------------- */
.meter{margin:.4rem 0 0}
.meter__track{height:12px;border-radius:99px;background:var(--sterile-2);overflow:hidden;border:1px solid var(--line)}
.meter__fill{height:100%;border-radius:99px;background:var(--signal)}
.meter__fill.is-warn{background:var(--amber)}
.meter__fill.is-max{background:var(--alert-ink)}
.meter__legend{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:.35rem}

/* --- Champs ------------------------------------------------------------- */
.field{display:block;margin:0 0 .9rem}
.field__label{display:block;font-size:.82rem;font-weight:600;color:var(--petrol-2);margin-bottom:.28rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:.95rem;color:var(--text);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:.6em .7em;min-height:var(--tap)}
.field input:focus,.field select:focus{border-color:var(--signal)}
.field__hint{font-size:.76rem;color:var(--muted);margin-top:.25rem}
.field input[aria-invalid="true"]{border-color:var(--alert-line);background:var(--alert-bg)}

/* --- Logo --------------------------------------------------------------- */
/* La marque de la console est la MASCOTTE (tête de robot) ; le mot-symbole
   « IAbot » porte le nom, avec « IA » en cyan seulement SUR LE MARINE (sur
   blanc, le cyan disparaîtrait : il prend le bleu cliquable). */
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.logo__mark{width:38px;height:38px;flex:0 0 auto}
img.logo__mark{object-fit:cover;background:var(--ink);border-radius:11px}
.logo__text{display:flex;flex-direction:column;line-height:1.05}
.logo__name{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink)}
.logo__ia{color:var(--signal-ink)}
.logo__sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.logo--onink .logo__name{color:#eaf1fb}
.logo--onink .logo__ia{color:var(--cyan)}
.logo--onink .logo__sub{color:#93c0f5}

/* ========== LA BARRE LATÉRALE — UNE SEULE, DEUX ESPACES ================= */
/* Le client et l'exploitant se servent de la MÊME barre : mêmes classes, même
   vocabulaire, même géométrie. Chaque entrée d'écran est un lien de fragment
   (`#id`) ; l'entrée courante porte `aria-current="page"` et c'est la seule
   marquée. La barre porte aussi l'unique entrée « avancé / CLI » (voir plus
   bas) : un lien de route, en fin de barre, jamais marqué « courant ». */
.espace{display:grid;grid-template-columns:252px 1fr;min-height:520px;background:var(--sterile)}
.espace__barre{background:var(--ink);color:#cfe0f5;display:flex;flex-direction:column;gap:1.2rem;padding:1.2rem 1rem}
.espace__nav{display:flex;flex-direction:column;gap:.25rem}
.espace__nav a{display:flex;align-items:center;gap:.65rem;padding:.62em .7em;border-radius:var(--radius-sm);color:#cfe0f5;text-decoration:none;font-size:.93rem;font-weight:500;min-height:var(--tap)}
.espace__nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.espace__nav a[aria-current="page"]{background:var(--signal-ink);color:#fff}
.navdot{width:8px;height:8px;border-radius:2px;background:#4d7bb5;flex:0 0 auto}
.espace__nav a[aria-current="page"] .navdot{background:var(--cyan)}
.espace__pied{margin-top:auto;display:flex;flex-direction:column;gap:.5rem;font-size:.8rem;color:#93c0f5}
.espace__pied .who{color:#eaf1fb;font-weight:600;overflow-wrap:anywhere}
.espace__main{padding:1.4rem 1.6rem 2rem;min-width:0}

/* ========== L'ENTRÉE « AVANCÉ / CLI » — EN FIN DE BARRE, À GAUCHE ======== */
/* Elle appartient à LA barre latérale : un lien de ROUTE (jamais un fragment)
   qui OUVRE l'interface avancée de l'instance, servie par la console derrière
   la session. Un léger séparateur la détache des écrans. Une seule entrée,
   dans une seule barre : il n'y a plus de panneau à droite. */
.espace__nav-sep{display:block;height:1px;margin:.45rem .2rem;background:rgba(255,255,255,.16)}
.espace__nav a.nav-route{font-weight:600}
.vue{max-width:var(--wrap)}
.vue__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.vue__titre{margin:0}
.vue__meta{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:.35rem}
.vue__verbes{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:0 0 1rem}
/* Le titre d'un écran porté par un panneau (espace client) */
.panel__head h1{font-size:1.45rem}

/* --- Journal d'événements (local à l'écran) ----------------------------- */
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.log li{display:flex;gap:.8rem;padding:.5rem 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.log li:last-child{border-bottom:0}
.log time{font-family:var(--mono);font-size:.74rem;color:var(--muted);flex:0 0 66px}

/* ============================== ESPACE CLIENT ============================ */
/* Le client se sert de LA MÊME barre latérale que l'atelier (`.espace__*`) :
   plus de bandeau horizontal, plus de classe propre à l'espace client. */

/* --- Connexion ---------------------------------------------------------- */
.login{min-height:520px;display:grid;place-items:center;padding:2rem 1.2rem;background:
  radial-gradient(1100px 420px at 50% -10%,#e8f0fb 0%,rgba(232,240,251,0) 70%),var(--sterile)}
.login__card{width:100%;max-width:400px;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--cyan);border-radius:var(--radius);padding:1.6rem 1.5rem;box-shadow:var(--shadow-lg)}
.login__card h1{font-size:1.5rem;margin:.35rem 0 .2rem}
.login__aside{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* --- La mascotte : porte d'entrée et écrans de connexion SEULEMENT ------ */
/* Le robot est la marque de la console. Il n'apparaît que là où l'on entre
   (la porte `/` et les deux connexions) ; les écrans de TRAVAIL — tableaux,
   formulaires, registre des locataires — restent calmes, c'est là qu'on
   travaille. Le liseré cyan est la seule touche de couleur de marque sur la
   carte blanche : purement décoratif, jamais porteur d'information. */
.marque{display:flex;flex-direction:column;align-items:center;gap:.45rem;margin:0 0 1.1rem}
.marque__mascotte{width:112px;height:112px;border-radius:24px;background:var(--ink);object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(72,240,248,.5),0 12px 30px -18px rgba(9,25,48,.75)}
.marque__nom{margin:0;font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.marque__sous{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* --- État vide ---------------------------------------------------------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:2.4rem 1.4rem;justify-content:center}
.empty__art{width:132px;height:88px;margin-bottom:.4rem}
.empty h3{margin:0}
.empty p{max-width:44ch;color:var(--muted);font-size:.92rem;margin:0}

/* --- Bandeau client (état dégradé) -------------------------------------- */
.clientbanner{max-width:1040px;margin:1rem auto 0;padding:0 1.4rem}

/* --- Toast -------------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#eaf1fb;font-size:.88rem;padding:.7em 1.1em;border-radius:999px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:50;max-width:90vw;text-align:center}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- Pied --------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding:1rem clamp(14px,3vw,26px) 1.6rem;font-size:.78rem;color:var(--muted);background:var(--sterile)}
.foot p{margin:0;max-width:110ch}

/* --- Attente ------------------------------------------------------------ */
.chargement{padding:2rem 1.4rem;text-align:center;color:var(--muted);font-family:var(--mono);font-size:.8rem}

/* --- Fiche de mesure et listes (espace client) -------------------------- */
/* Ce que la MACHINE a répondu : la fiche de l'instance. Grille clé/valeur
   sobre, qui ne réutilise que les jetons de l'identité — aucune couleur
   nouvelle, aucun composant de plus. */
.fiche{display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;margin:.2rem 0 .35rem}
.fiche dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fiche dd{margin:0;min-width:0;overflow-wrap:anywhere}
.fiche dd b{font-weight:500}
.liste{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.liste li{display:flex;align-items:center;gap:.55rem;font-size:.92rem;flex-wrap:wrap}

/* --- Adaptations -------------------------------------------------------- */
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  /* La barre passe AU-DESSUS du contenu et ses entrées s'ENROULENT : ni
     débordement horizontal, ni défilement à rattraper (mesuré à 390 px).
     En colonne flexible, la barre peut en plus RESTER EN HAUT pendant qu'on
     fait défiler l'écran : c'est ce qui garde ses entrées atteignables quand
     la page grandit (l'entrée « avancé / CLI » s'ajoute à la même barre). */
  .espace{display:flex;flex-direction:column}
  .espace__barre{position:sticky;top:0;z-index:3}
  .espace__nav{flex-direction:row;flex-wrap:wrap}
  .espace__nav a{flex:0 1 auto;min-width:0}
  .espace__nav-sep{flex:1 0 100%;margin:.2rem 0}
  .espace__pied{margin-top:.5rem}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}