/* JLR AUTO Mobile — thème sombre "centre de commande" (cohérent avec le bureau) */
:root {
  --fond: #0E0B24;
  --panneau: #191542;
  --panneau2: #221D55;
  --bord: #322B6E;
  --texte: #EDECF7;
  --texte2: #A7A3CC;
  --cyan: #35D6E8;
  --violet: #9B5CF0;
  --ambre: #F0B44A;
  --vert: #3BE89B;
  --peri: #6C6CD0;
  --rouge: #F06A6A;
  --bleu: #5AA0F0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--fond); color: var(--texte);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; min-height: 100%; }
body { padding-bottom: env(safe-area-inset-bottom); }

.ecran { min-height: 100vh; display: flex; flex-direction: column; }
.cache { display: none !important; }

/* ---------- Login ---------- */
#ecran-login { justify-content: center; align-items: center;
  background: radial-gradient(circle at 50% 20%, #1B1650 0%, var(--fond) 70%); }
.login-boite { width: min(340px, 88vw); text-align: center; padding: 28px 24px;
  background: rgba(25,21,66,.75); border: 1px solid var(--bord); border-radius: 18px; }
.login-logo { height: 56px; margin-bottom: 8px; }
.login-boite h1 { margin: 0; font-size: 26px; letter-spacing: 3px; color: #fff;
  text-shadow: 0 0 18px rgba(108,108,208,.8); }
.sous-titre { margin: 2px 0 20px; color: var(--texte2); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.login-boite input { width: 100%; margin-bottom: 12px; }
#login-btn { width: 100%; margin-top: 4px; }
.msg-erreur { color: var(--rouge); font-size: 13px; min-height: 18px; margin: 10px 0 0; }

/* ---------- Champs ---------- */
input[type=text], input[type=password], textarea, select {
  background: var(--panneau2); color: var(--texte); border: 1px solid var(--bord);
  border-radius: 10px; padding: 11px 12px; font-size: 16px; font-family: inherit; width: 100%;
  outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--cyan); }
textarea { resize: vertical; }
label { display: block; font-size: 12.5px; color: var(--texte2); margin: 10px 0 4px; letter-spacing: .3px; }
input[type=file] { color: var(--texte2); font-size: 14px; width: 100%; padding: 10px;
  background: var(--panneau2); border: 1px dashed var(--bord); border-radius: 10px; }

/* ---------- Boutons ---------- */
.btn { border: none; border-radius: 10px; padding: 12px 18px; font-size: 15.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; }
.btn:active { transform: scale(.97); }
.btn-cyan   { background: var(--cyan);   color: #06272C; }
.btn-violet { background: var(--violet); color: #fff; }
.btn-ambre  { background: var(--ambre);  color: #33240A; }
.btn-vert   { background: var(--vert);   color: #06301E; }
.btn-peri   { background: var(--peri);   color: #fff; }
.btn-sombre { background: var(--panneau2); color: var(--texte); border: 1px solid var(--bord); }
.btn-ico { background: none; border: none; color: var(--texte2); font-size: 20px; padding: 6px 10px; cursor: pointer; }
.ligne-btn { display: flex; gap: 10px; margin-top: 12px; }
.ligne-btn .btn { flex: 1; text-align: center; }
.ligne-btn select { flex: 1; width: auto; }

/* ---------- Accueil ---------- */
.entete-app { display: flex; align-items: center; gap: 12px; padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top)); }
.entete-logo { height: 40px; }
.entete-titres { flex: 1; }
.entete-nom { font-size: 19px; font-weight: 700; letter-spacing: 2px; color: #fff;
  text-shadow: 0 0 14px rgba(108,108,208,.7); }
.entete-user { font-size: 12.5px; color: var(--texte2); }
.tuiles { display: flex; flex-direction: column; gap: 12px; padding: 6px 16px 24px; }
.tuile { position: relative; text-align: left; background: linear-gradient(160deg, var(--panneau) 0%, #14103A 100%);
  border: 1px solid var(--bord); border-radius: 16px; padding: 16px 16px 14px 16px; color: var(--texte);
  font-family: inherit; cursor: pointer; overflow: hidden; }
.tuile:active { transform: scale(.98); }
.tuile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acc); }
.t-violet { --acc: var(--violet); } .t-ambre { --acc: var(--ambre); }
.t-cyan { --acc: var(--cyan); } .t-peri { --acc: var(--peri); } .t-vert { --acc: var(--vert); }
.t-rouge { --acc: var(--rouge); } .t-bleu { --acc: var(--bleu); }
.t-num { position: absolute; right: 14px; top: 10px; font-size: 12px; color: var(--acc); opacity: .8; letter-spacing: 1px; }
.t-ico { font-size: 22px; display: inline-block; margin-right: 8px; vertical-align: middle; }
.t-nom { font-size: 16.5px; font-weight: 700; color: #fff; vertical-align: middle; }
.t-desc { display: block; margin-top: 6px; font-size: 12.5px; color: var(--texte2); line-height: 1.4; }

/* ---------- Écrans de fonction ---------- */
.entete-sec { display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--panneau); border-bottom: 2px solid var(--acc, var(--bord));
  position: sticky; top: 0; z-index: 5; }
.ac-violet { --acc: var(--violet); } .ac-ambre { --acc: var(--ambre); }
.ac-cyan { --acc: var(--cyan); } .ac-peri { --acc: var(--peri); } .ac-vert { --acc: var(--vert); }
.ac-rouge { --acc: var(--rouge); } .ac-bleu { --acc: var(--bleu); }

/* ---------- Explorateur réseau ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: var(--panneau); border: 1px solid var(--bord); color: var(--texte2);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-family: inherit; cursor: pointer; }
.chip.actif { background: var(--panneau2); color: #fff; border-color: var(--acc, var(--cyan)); }
.fs-chemin { font-size: 13px; color: var(--texte2); word-break: break-all; line-height: 1.7; }
.fs-chemin a { color: var(--cyan); text-decoration: none; }
.li-ico { display: inline-block; width: 26px; }
.entete-sec h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; }
.btn-retour { background: none; border: none; color: var(--acc, var(--cyan)); font-size: 30px;
  line-height: 1; padding: 0 10px 4px 4px; cursor: pointer; }
.contenu { flex: 1; padding: 14px 14px 28px; display: flex; flex-direction: column; gap: 12px; }
.carte { background: var(--panneau); border: 1px solid var(--bord); border-radius: 14px; padding: 14px; }
.carte h3 { margin: 0 0 8px; font-size: 15px; color: #fff; }
.aide { font-size: 13px; color: var(--texte2); line-height: 1.5; margin: 0; }

/* ---------- Onglets ---------- */
.onglets { display: flex; gap: 8px; }
.onglet { flex: 1; background: var(--panneau); border: 1px solid var(--bord); color: var(--texte2);
  border-radius: 10px; padding: 10px 4px; font-size: 13.5px; font-family: inherit; cursor: pointer; }
.onglet.actif { background: var(--panneau2); color: #fff; border-color: var(--violet); }
.panneau-onglet { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Enregistrement ---------- */
.rec-zone { text-align: center; padding: 18px 0 8px; }
.rec-btn { width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--violet);
  background: var(--panneau2); color: var(--rouge); font-size: 34px; cursor: pointer; }
.rec-btn.actif { background: var(--rouge); color: #fff; border-color: var(--rouge);
  animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(240,106,106,.5); } 70% { box-shadow: 0 0 0 18px rgba(240,106,106,0); } 100% { box-shadow: 0 0 0 0 rgba(240,106,106,0); } }
.rec-temps { font-size: 26px; font-variant-numeric: tabular-nums; margin-top: 10px; color: #fff; }
.rec-etat { font-size: 13px; color: var(--texte2); margin-top: 2px; }

/* ---------- CR ---------- */
.cr-meta { font-size: 12.5px; color: var(--texte2); margin: 2px 0 10px; }
.bloc-texte { background: var(--panneau2); border-radius: 10px; padding: 12px; font-size: 14.5px;
  line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.tab-actions { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.tab-actions th { text-align: left; color: var(--violet); padding: 6px 6px; border-bottom: 1px solid var(--bord); }
.tab-actions td { padding: 6px 6px; border-bottom: 1px solid #262058; vertical-align: top; }
.liste { display: flex; flex-direction: column; }
.liste-item { padding: 10px 4px; border-bottom: 1px solid #262058; cursor: pointer; }
.liste-item:last-child { border-bottom: none; }
.liste-item .li-titre { font-size: 14px; color: var(--texte); }
.liste-item .li-sous { font-size: 12px; color: var(--texte2); margin-top: 2px; }
.liste-vide { color: var(--texte2); font-size: 13px; padding: 6px 4px; }

/* ---------- Fils de discussion / résultats ---------- */
.fil { display: flex; flex-direction: column; gap: 10px; }
.fil-chat { flex: 1; overflow-y: auto; }
.bulle { max-width: 92%; padding: 11px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.55;
  word-wrap: break-word; overflow-wrap: break-word; }
.bulle a { color: var(--cyan); word-break: break-all; }
.bulle-user { align-self: flex-end; background: var(--peri); color: #fff; border-bottom-right-radius: 4px; }
.bulle-ia { align-self: flex-start; background: var(--panneau); border: 1px solid var(--bord);
  border-bottom-left-radius: 4px; }
.bulle-ia.pleine { max-width: 100%; align-self: stretch; }
.sources { font-size: 12.5px; }
.sources a { display: block; color: var(--cyan); margin-top: 6px; word-break: break-all; text-decoration: none; }
.doc-lien { display: block; background: var(--panneau2); border: 1px solid var(--bord); border-radius: 10px;
  padding: 10px 12px; margin-top: 8px; color: var(--texte); text-decoration: none; }
.doc-lien .dl-titre { color: var(--ambre); font-size: 14px; font-weight: 600; }
.doc-lien .dl-sous { color: var(--texte2); font-size: 12px; margin-top: 2px; word-break: break-all; }
.contenu-chat { padding-bottom: 10px; }
.saisie-chat { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0;
  background: var(--fond); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
.saisie-chat textarea { flex: 1; max-height: 120px; }
.btn-envoi { background: var(--cyan); color: #06272C; border: none; border-radius: 50%;
  width: 46px; height: 46px; font-size: 19px; cursor: pointer; flex-shrink: 0; }

/* ---------- Photo ---------- */
.photo-apercu { position: relative; margin-top: 10px; }
.photo-apercu img { width: 100%; border-radius: 10px; display: block; }
.photo-apercu .btn-ico { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6);
  border-radius: 50%; color: #fff; }

/* ---------- Voile d'attente / toast ---------- */
.voile { position: fixed; inset: 0; background: rgba(10,8,28,.82); z-index: 50;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; }
.spinner { width: 46px; height: 46px; border: 4px solid var(--bord); border-top-color: var(--cyan);
  border-radius: 50%; animation: rot 1s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
#voile-msg { color: var(--texte2); font-size: 14px; text-align: center; padding: 0 30px; }
.toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--panneau2); border: 1px solid var(--bord); color: var(--texte);
  padding: 12px 18px; border-radius: 12px; font-size: 14px; z-index: 60; max-width: 86vw; text-align: center; }