/* ORENIQ UI-01 : interface de connexion et de conversation (sans framework). */
/* BRAND-01 : charte ORENIQ. Couleurs, polices, espacements et rayons = tokens de /palette.css (pack certifié
   oreniq-brand-ai.zip, copié à l'octet, chargé AVANT ce fichier). Ici : tokens FONCTIONNELS (A8 limites interactives,
   A2 focus, A4 bulle utilisateur, A5 couleurs d'état) et composants. Aucune police web (A1 : repli Segoe UI). Lime
   réservé au bouton principal, aux états actifs et au point de marque (A7), jamais en texte sur fond clair. */
:root {
  /* A8 : limites des composants interactifs (≥ 3:1) ; `line` reste réservé aux filets et séparateurs. */
  --bordure-interactive: var(--ink-muted);
  /* A2 : focus navy en clair, lime en sombre. */
  --focus: var(--brand-navy);
  /* A4 : bulle utilisateur navy + crème, jamais lime. */
  --bulle-user: var(--brand-navy);
  --bulle-user-texte: var(--brand-cream);
  /* A5 : couleurs d'état conservées, sous contrôle de contraste. */
  --erreur-fond: #fdecec;
  --erreur-texte: #8f1d1d;
  --erreur-bord: #f2b8b8;
  --info-fond: #fff6e0;
  --info-texte: #6b4b00;
  --info-bord: #f0d58c;
  --ok-fond: #e8f5ee;
  --ok-texte: #1d5e3a;
  --ok-bord: #a9d8bd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --focus: var(--brand-lime);
    --bulle-user: var(--brand-navy-700);
    --erreur-fond: #3a1717;
    --erreur-texte: #ffc9c9;
    --erreur-bord: #6b2a2a;
    --info-fond: #33290f;
    --info-texte: #f3dc9b;
    --info-bord: #5e4b1a;
    --ok-fond: #12301f;
    --ok-texte: #b5e6c9;
    --ok-bord: #2c5e41;
  }
}
:root[data-theme="dark"] {
  --focus: var(--brand-lime);
  --bulle-user: var(--brand-navy-700);
  --erreur-fond: #3a1717;
  --erreur-texte: #ffc9c9;
  --erreur-bord: #6b2a2a;
  --info-fond: #33290f;
  --info-texte: #f3dc9b;
  --info-bord: #5e4b1a;
  --ok-fond: #12301f;
  --ok-texte: #b5e6c9;
  --ok-bord: #2c5e41;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

h1, h2 { font-family: var(--font-display); font-weight: 600; }

[hidden] { display: none !important; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.noscript { padding: var(--space-6); text-align: center; }

/* ---------- marque : logo SVG officiel, jamais recomposé en texte (A12 : complet ≥ 96 px) ---------- */
.marque { display: flex; justify-content: center; line-height: 0; }
.marque img { display: block; width: 160px; height: auto; }
.marque.petite { justify-content: flex-start; flex: none; }
.marque.petite img { width: 112px; }
.sous-titre { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.discret { color: var(--ink-muted); margin: 0; }

/* ---------- icônes au trait (Lucide, trait 1,75 px) ---------- */
.icone { display: block; width: 20px; height: 20px; flex: none; }

/* ---------- vues ---------- */
.vue { min-height: 100vh; min-height: 100dvh; }
.vue-centre {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); padding: var(--space-6) var(--space-4);
}

/* ---------- connexion ---------- */
.carte {
  width: 100%; max-width: 400px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.carte .marque { margin-bottom: var(--space-2); }
.carte .sous-titre { text-align: center; }
.carte h1 { font-size: 20px; line-height: 28px; margin: var(--space-4) 0 var(--space-1); }
.carte label { font-weight: 600; font-size: 14px; line-height: 20px; margin-top: var(--space-2); }
.carte input {
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--bordure-interactive);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  width: 100%;
}
.carte input:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.carte .btn-principal { margin-top: var(--space-4); width: 100%; }

/* ---------- bandeaux ---------- */
.bandeau {
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: 14px; line-height: 20px;
  border: 1px solid var(--erreur-bord); background: var(--erreur-fond); color: var(--erreur-texte);
}
.bandeau.info { border-color: var(--info-bord); background: var(--info-fond); color: var(--info-texte); }
.bandeau.ok { border-color: var(--ok-bord); background: var(--ok-fond); color: var(--ok-texte); }

/* ---------- boutons ---------- */
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.6; }
.btn-principal {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-weight: 600;
}
/* A3 : survol par contour navy 2 px tracé vers l'intérieur : aucune bordure ajoutée, aucun déplacement. */
.btn-principal:hover:not(:disabled) { outline: 2px solid var(--on-accent); outline-offset: -2px; }
.btn-secondaire {
  background: transparent; color: var(--ink);
  border: 1px solid var(--bordure-interactive); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); font-size: 14px; line-height: 20px;
}
.btn-secondaire:hover:not(:disabled) { background: var(--surface); }
button:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-principal:focus-visible:not(:disabled) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- indicateurs de chargement ---------- */
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--focus);
  animation: tourne 0.8s linear infinite;
}
.spinner.petit { width: 16px; height: 16px; border-width: 2px; border-color: rgba(14, 26, 43, 0.3); border-top-color: currentColor; }
@keyframes tourne { to { transform: rotate(360deg); } }

.points { display: inline-flex; gap: var(--space-1); }
.points span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted);
  animation: saut 1s ease-in-out infinite;
}
.points span:nth-child(2) { animation-delay: 0.15s; }
.points span:nth-child(3) { animation-delay: 0.3s; }
@keyframes saut { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .spinner, .points span { animation-duration: 2.5s; }
}

/* ---------- conversation ---------- */
.vue-chat {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100vh; height: 100dvh;
}
.vue-chat[hidden] { display: none !important; }

.entete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}
.entete-marque { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.entete-utilisateur { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
/* CHAT-UX-01 : règle limitée à l'EN-TÊTE. Écrite « .utilisateur », elle atteignait aussi chaque bulle « message utilisateur »
   (flex en ligne) : l'heure devenait une colonne d'un caractère à droite du texte (« 1/9/:/0/9 »). */
.entete .utilisateur { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.utilisateur-email {
  font-size: 14px; line-height: 20px; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw;
}
.badge {
  font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-text); border: 1px solid currentColor; border-radius: var(--radius-full); padding: 0 var(--space-2);
}

.bandeau-ia { margin: var(--space-3) var(--space-4) 0; border-radius: var(--radius-md); }

.historique {
  overflow-y: auto;
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  scroll-behavior: smooth;
}
/* CHAT-UX-01 : colonne de lecture CENTRÉE, de 960 px au plus (la largeur d'une réponse avec tableau, RICH-01). Les messages de
   l'utilisateur restent à droite et les réponses à gauche, mais DANS cette colonne : sur un grand écran, plus de bulles collées
   aux deux bords du fil ni de grande zone vide à côté d'un long message. Marges calculées sur la largeur du fil (le défilement
   reste au bord du fil) ; sous 992 px de fil, marge d'origine. La saisie s'aligne sur la même colonne. */
.vue-chat { --largeur-lecture: 960px; }
.historique { padding-inline: max(var(--space-4), calc((100% - var(--largeur-lecture)) / 2)); }
.message {
  max-width: min(720px, 86%);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message .heure { display: block; margin-top: var(--space-1); font-size: 12px; line-height: 16px; }
.message.utilisateur {
  align-self: flex-end;
  background: var(--bulle-user); color: var(--bulle-user-texte);
  border-bottom-right-radius: var(--radius-sm);
}
.message.assistant {
  align-self: flex-start;
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--radius-sm);
}
.message.desactive { border-left: 4px solid var(--info-bord); }
.message.systeme {
  align-self: center;
  background: var(--erreur-fond); color: var(--erreur-texte); border: 1px solid var(--erreur-bord);
  font-size: 14px; line-height: 20px;
}
.message.attente { padding: var(--space-3) var(--space-4); }

/* RICH-01 : réponse d'ORENIQ STRUCTURÉE (rendu.js) : titres, paragraphes, listes, tableaux, citations, code, liens. Sobre,
   dans la bulle ; plus de largeur que les messages de l'utilisateur ; un tableau large défile SEUL (jamais la page). */
.message.assistant.riche { max-width: min(860px, 94%); white-space: normal; }
.message.assistant.avec-tableau { max-width: min(960px, 100%); }
.reponse-structuree > * { margin: 0; }
.reponse-structuree > * + * { margin-top: var(--space-3); }
.reponse-structuree .titre { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.reponse-structuree h3 { font-size: 18px; line-height: 26px; }
.reponse-structuree h4 { font-size: 16px; line-height: 24px; }
.reponse-structuree h5 { font-size: 15px; line-height: 22px; }
.reponse-structuree > * + .titre { margin-top: var(--space-4); }
.reponse-structuree > .titre + * { margin-top: var(--space-2); }
.reponse-structuree ul, .reponse-structuree ol { padding-left: var(--space-6); }
.reponse-structuree li + li, .reponse-structuree li > ul, .reponse-structuree li > ol { margin-top: var(--space-1); }
.reponse-structuree blockquote {
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface); color: var(--ink-muted);
}
.reponse-structuree blockquote p { margin: 0; }
.reponse-structuree blockquote p + p { margin-top: var(--space-2); }
.reponse-structuree blockquote p:empty { display: none; }
.reponse-structuree code {
  font-family: var(--font-mono); font-size: 0.875em;
  padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
}
.reponse-structuree pre {
  overflow-x: auto; white-space: pre; overflow-wrap: normal;
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.reponse-structuree pre code { padding: 0; border: 0; background: none; font-size: 13px; line-height: 20px; }
.reponse-structuree a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.reponse-structuree a:focus-visible, .tableau-defilant:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reponse-structuree hr { border: 0; border-top: 1px solid var(--line); }
.tableau-defilant { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tableau-defilant table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tableau-defilant th, .tableau-defilant td {
  min-width: 6rem; padding: var(--space-2) var(--space-3);
  text-align: left; vertical-align: top; overflow-wrap: normal; border-bottom: 1px solid var(--line);
}
.tableau-defilant th { font-weight: 600; background: var(--surface); }
.tableau-defilant tbody tr:last-child td { border-bottom: 0; }
.tableau-defilant .droite { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-defilant .centre { text-align: center; }

/* RICH-03 : visuels des réponses (graphiques, schémas) dessinés en SVG par graphiques.js ; couleurs des séries en clair
   et en sombre (contraste ≥ 3:1 sur le fond du dessin) ; dessin dans une région défilante (mobile : défilement du dessin
   seul, comme les tableaux) ; données dans un <details>. */
.visuel { margin: 0; }
.visuel-titre { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 22px; color: var(--ink); margin-bottom: var(--space-2); }
.visuel-defilant { max-width: 100%; overflow-x: auto; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.visuel-defilant:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visuel-graphique .visuel-dessin { display: block; width: 100%; min-width: 420px; max-width: 680px; height: auto; margin: 0 auto; }
.visuel-graphique .visuel-dessin.compact { min-width: 280px; max-width: 460px; }
.visuel-schema .visuel-dessin { display: block; max-width: none; height: auto; margin: 0 auto; }
.visuel-dessin { font-family: inherit; }
.visuel-dessin text { fill: var(--ink); font-size: 13px; }
.visuel-dessin .graduation, .visuel-dessin .etiquette-x { fill: var(--ink-muted); font-size: 12px; }
.visuel-dessin .valeur { fill: var(--ink); font-size: 12px; font-weight: 600; }
.visuel-dessin .etiquette-point, .visuel-dessin .legende-texte { font-size: 12.5px; }
.visuel-dessin .grille { stroke: var(--line); stroke-width: 1; }
.visuel-dessin .axe { stroke: var(--ink-muted); stroke-width: 1.2; }
.visuel-dessin .barre, .visuel-dessin .point, .visuel-dessin .part { fill: var(--c); }
.visuel-dessin .part { stroke: var(--surface-raised); stroke-width: 2; }
.visuel-dessin .trait { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.visuel-dessin .noeud rect { fill: var(--surface); stroke: var(--ink-muted); stroke-width: 1.3; }
.visuel-dessin .noeud-racine rect { stroke: var(--focus); stroke-width: 2; }
.visuel-dessin .noeud-texte { font-size: 13px; }
.visuel-dessin .lien { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; }
.visuel-dessin .fleche { fill: var(--ink-muted); }
.visuel-dessin .etiquette-fond { fill: var(--surface-raised); stroke: var(--line); }
.visuel-dessin .etiquette-lien { fill: var(--ink-muted); font-size: 11.5px; }
.serie-0 { --c: #1F5FBF; } .serie-1 { --c: #1D7A46; } .serie-2 { --c: #C2620E; } .serie-3 { --c: #6B46C1; }
.serie-4 { --c: #0F7C8C; } .serie-5 { --c: #B42318; } .serie-6 { --c: #8A6D00; } .serie-7 { --c: #5A6372; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .serie-0 { --c: #6EA8FF; } :root:not([data-theme="light"]) .serie-1 { --c: #5BC48A; }
  :root:not([data-theme="light"]) .serie-2 { --c: #F2A35A; } :root:not([data-theme="light"]) .serie-3 { --c: #A78BFA; }
  :root:not([data-theme="light"]) .serie-4 { --c: #4FC3D0; } :root:not([data-theme="light"]) .serie-5 { --c: #F07A6E; }
  :root:not([data-theme="light"]) .serie-6 { --c: #E0C34A; } :root:not([data-theme="light"]) .serie-7 { --c: #9AA6B8; }
}
:root[data-theme="dark"] .serie-0 { --c: #6EA8FF; } :root[data-theme="dark"] .serie-1 { --c: #5BC48A; }
:root[data-theme="dark"] .serie-2 { --c: #F2A35A; } :root[data-theme="dark"] .serie-3 { --c: #A78BFA; }
:root[data-theme="dark"] .serie-4 { --c: #4FC3D0; } :root[data-theme="dark"] .serie-5 { --c: #F07A6E; }
:root[data-theme="dark"] .serie-6 { --c: #E0C34A; } :root[data-theme="dark"] .serie-7 { --c: #9AA6B8; }
.visuel-legende { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; padding: 0; font-size: 13px; color: var(--ink-muted); }
.visuel-legende li { display: flex; align-items: center; gap: var(--space-2); }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.visuel-sources { margin: var(--space-2) 0 0; font-size: 12.5px; color: var(--ink-muted); font-style: italic; }
.visuel-sources-retirees { padding: var(--space-1) var(--space-2); border-inline-start: 3px solid var(--info-bord); background: var(--info-fond); color: var(--info-texte); font-style: normal; }
.visuel-donnees { margin-top: var(--space-2); font-size: 13px; }
.visuel-donnees summary { cursor: pointer; color: var(--accent-text); }
.visuel-donnees > .tableau-defilant, .visuel-donnees > ol, .visuel-donnees > ul { margin-top: var(--space-2); }

/* EXPORT-01 : fichiers créés par ORENIQ sous une réponse (carte : type, nom, taille, disponibilité, Télécharger). */
.message.avec-fichiers > span:first-child { display: block; }
.message .fichiers-message {
  list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2);
  white-space: normal;
}
.message .fichier {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
}
.fichier-badge {
  flex: none; min-width: 44px; padding: 2px var(--space-1); border-radius: var(--radius-sm); text-align: center;
  font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.04em; color: #FFFFFF;
}
.fichier-pdf .fichier-badge { background: #B42318; }
.fichier-docx .fichier-badge { background: #1F5FBF; }
.fichier-xlsx .fichier-badge { background: #1D7A46; }
.fichier-infos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fichier-nom { font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichier-meta { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.fichier-telecharger { flex: none; }
.message .fichier.expire { opacity: 0.7; }
.message .fichier.expire .fichier-badge { background: var(--ink-muted); }
/* IMAGE-01 : image générée : aperçu sur toute la largeur de la carte, au-dessus du type, du nom et de Télécharger. */
.fichier-png .fichier-badge { background: #6941C6; }
/* LONG-OUTPUT-01B : réponse longue complète en texte brut (.txt). */
.fichier-txt .fichier-badge { background: #475467; }
.message .fichier.fichier-image { flex-wrap: wrap; row-gap: var(--space-2); }
.fichier-apercu {
  display: block; flex: 1 1 100%; width: 100%; max-width: 512px; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
@media (max-width: 480px) {
  .message .fichier { flex-wrap: wrap; row-gap: var(--space-2); }
  .fichier-infos { flex: 1 1 calc(100% - 60px); }
  .fichier-nom { white-space: normal; overflow-wrap: anywhere; }
  .fichier-telecharger { margin-left: 56px; }
}

.saisie {
  display: flex; align-items: flex-end; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface-raised);
  border-top: 1px solid var(--line);
}
.saisie { padding-inline: max(var(--space-4), calc((100% - var(--largeur-lecture)) / 2)); }
.saisie textarea {
  flex: 1;
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--bordure-interactive); border-radius: var(--radius-md);
  padding: var(--space-3);
  resize: none;
  max-height: 200px;
  line-height: 24px;
}
.saisie textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.saisie textarea:disabled { opacity: 0.6; cursor: not-allowed; }
/* LONG-OUTPUT-01D : bandeau UNIQUE du service de conversation (vérification, indisponible), en tête de la saisie. */
.bandeau-service { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.bandeau-service[hidden] { display: none; }
.bandeau-service-texte { flex: 1 1 16rem; }

/* ---------- CTRL-01 : H24, niveau de réponse, mention, demandes d'autorisation ---------- */
.saisie { flex-wrap: wrap; align-content: flex-end; }
/* UX-CHAT-CLOSE : avec le choix « Analyser avec Builder » (offres avec Builder), sur un écran étroit, le champ et « Envoyer »
   partagent une ligne ENTIÈRE ; « + » et ce choix passent au-dessus. Sans ce choix, ou au-delà de 900 px : rien ne change
   (le champ était écrasé à 50–116 px entre ces contrôles et « Envoyer », renvoyé seul à la ligne). */
@media (max-width: 900px) {
  .saisie:has(.pieces-ultracode:not([hidden])) textarea { flex: 1 1 calc(100% - 7.5rem); }
}

.interrupteur {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; color: var(--ink);
  border: 1px solid var(--bordure-interactive); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap;
}
.interrupteur:hover:not(:disabled) { background: var(--surface); }
.interrupteur-piste {
  position: relative; width: 32px; height: 16px; border-radius: var(--radius-full);
  background: var(--bordure-interactive); transition: background 0.15s;
}
.interrupteur-curseur {
  position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface-raised); transition: transform 0.15s;
}
/* A7 : état actif = piste lime ; curseur navy pour que l'état reste lisible (≥ 3:1 contre la piste). */
.interrupteur[aria-checked="true"] .interrupteur-piste { background: var(--accent); }
.interrupteur[aria-checked="true"] .interrupteur-curseur { transform: translateX(16px); background: var(--on-accent); }
.interrupteur-etat { min-width: 2.2em; text-align: left; color: var(--ink-muted); }
.interrupteur[aria-checked="true"] .interrupteur-etat { color: var(--accent-text); }

.effort {
  flex-basis: 100%;
  display: flex; align-items: center; gap: var(--space-1);
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.effort-legende { float: left; padding: 0; margin-right: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.effort-option { position: relative; }
.effort-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.effort-option span {
  display: inline-block; padding: var(--space-1) var(--space-3); font-size: 14px; line-height: 20px; cursor: pointer;
  border: 1px solid var(--bordure-interactive); border-radius: var(--radius-full); color: var(--ink-muted); background: var(--surface-raised);
}
/* A7 : niveau choisi en aplat ink (navy en clair, crème en sombre), texte surface ; jamais lime. */
.effort-option input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
.effort-option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.message .mention { display: block; margin-top: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* METERING-01 : compteur de tokens de la semaine (absent si le serveur ne publie pas /billing/me). */
.compteur {
  flex-basis: 100%; margin: 0; min-width: 0;
  font-size: 12px; line-height: 16px; color: var(--ink-muted); overflow-wrap: anywhere;
}
.compteur .compteur-offre { font-weight: 600; color: var(--ink); }
.compteur.epuise .compteur-reste { color: var(--erreur-texte); font-weight: 600; }

.message.autorisation {
  align-self: stretch; max-width: min(720px, 100%); white-space: normal;
  background: var(--info-fond); color: var(--info-texte); border: 1px solid var(--info-bord);
}
.autorisation h2 { font-size: 16px; line-height: 24px; margin: 0 0 var(--space-2); }
.autorisation dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); font-size: 14px; line-height: 20px; }
.autorisation dt { font-weight: 600; }
.autorisation dd { margin: 0; overflow-wrap: anywhere; }
.autorisation .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.autorisation .issue { margin: 0; font-weight: 600; }

/* ---------- HISTORY-01 : historique des conversations ---------- */
/* Sans la classe avec-historique (serveur sans /history/options) : la mise en page d'avant, inchangée. */
/* LONG-OUTPUT-01D : sans la colonne (vérification ou service indisponible), fil et saisie sur leurs lignes : le fil garde la place
   restante même quand le bandeau IA est masqué (sinon le fil prenait la ligne « auto » et la saisie la ligne extensible). */
.vue-chat:not(.avec-historique) > .historique { grid-row: 3; }
.vue-chat:not(.avec-historique) > .saisie { grid-row: 4; }
.vue-chat.avec-historique {
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas:
    "entete entete"
    "panneau bandeau"
    "panneau fil"
    "panneau saisie";
}
.vue-chat.avec-historique .entete { grid-area: entete; }
.vue-chat.avec-historique .bandeau-ia { grid-area: bandeau; }
.vue-chat.avec-historique .historique { grid-area: fil; }
.vue-chat.avec-historique .saisie { grid-area: saisie; }
.vue-chat.avec-historique .panneau-historique { grid-area: panneau; }

.panneau-historique {
  display: flex; flex-direction: column; gap: var(--space-2); min-height: 0;
  padding: var(--space-3);
  background: var(--surface-raised);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.panneau-tete { display: flex; gap: var(--space-2); align-items: center; }
.panneau-tete .btn-principal { flex: 1; }
.btn-fermer { display: none; }
.panneau-info { font-size: 14px; line-height: 20px; }
.liste-conversations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.conversation { display: flex; align-items: stretch; border-radius: var(--radius-md); }
.conversation:hover, .conversation.actuelle { background: var(--surface); }
/* A7 : conversation active = barre lime (état actif), doublée d'un titre en graisse 600. */
.conversation.actuelle { box-shadow: inset 4px 0 0 var(--accent); }
.conversation.actuelle .conversation-titre { font-weight: 600; }
.conversation-ouvrir {
  flex: 1; min-width: 0; text-align: left;
  display: flex; flex-direction: column; gap: 0;
  background: transparent; color: var(--ink); border: 0; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}
.conversation-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; }
.conversation-date { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.conversation-supprimer {
  flex: none; width: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-muted); border: 0; border-radius: var(--radius-md);
}
.conversation-supprimer .icone { width: 18px; height: 18px; }
.conversation-supprimer:hover:not(:disabled) { color: var(--erreur-texte); background: var(--erreur-fond); }
.btn-plus { align-self: stretch; }
.historique .btn-plus { align-self: center; }
.btn-historique { padding: var(--space-1) var(--space-3); display: none; align-items: center; gap: var(--space-2); flex: none; }
.icone-menu { display: inline-flex; }
.voile { display: none; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .vue-chat.avec-historique {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "entete" "bandeau" "fil" "saisie";
  }
  .vue-chat.avec-historique .btn-historique:not([hidden]) { display: inline-flex; }
  .panneau-historique {
    position: fixed; z-index: 20; top: 0; bottom: 0; left: 0;
    width: min(86vw, 320px);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top));
    transform: translateX(-102%); transition: transform 0.2s ease;
  }
  .panneau-historique.ouvert { transform: none; }
  .btn-fermer { display: inline-flex; }
  .voile:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 10;
    background: rgba(0, 0, 0, 0.35);
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .panneau-historique { transition: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 600px) {
  .interrupteur { padding: var(--space-1) var(--space-2); }
  .interrupteur-etat { display: none; }
  /* Place pour l'interrupteur H24 : l'email (déjà abrégé) laisse la place sur petit écran. */
  .interrupteur:not([hidden]) ~ .utilisateur .utilisateur-email { display: none; }
  .carte { padding: var(--space-6) var(--space-4); }
  .entete { padding: var(--space-2) var(--space-3); }
  .entete .sous-titre { display: none; }
  /* A12 : symbole seul sur mobile étroit (la source est choisie par <picture>). */
  .marque.petite img { width: 28px; }
  .utilisateur-email { max-width: 38vw; font-size: 14px; }
  .badge { display: none; }
  .bandeau-ia { margin: var(--space-2) var(--space-3) 0; font-size: 14px; }
  .historique { padding: var(--space-3); }
  .message { max-width: 92%; }
  .saisie { padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .saisie textarea { font-size: 16px; }
  /* HISTORY-01 : bouton Historique réduit à son icône (libellé conservé pour les lecteurs d'écran). */
  .libelle-historique { display: none; }
  .btn-historique { padding: var(--space-1) var(--space-2); }
  .vue-chat.avec-historique .entete { gap: var(--space-2); }
  .vue-chat.avec-historique .entete-marque { gap: var(--space-2); }
}
/* UX-CHAT-CLOSE : en-tête des écrans SANS panneau d'historique (≤ 760 px). Avec l'interrupteur H24 (affiché dès que les options du
   compte sont chargées), il ne tenait pas : « Déconnexion » sortait de l'écran (page plus large que l'écran) sous ~380 px et de 601
   à 760 px, où devise et rôle chevauchaient aussi leurs voisins ; à 320 px, le sélecteur de langue recouvrait le logo. Jusqu'à 760 px,
   l'en-tête prend la forme mobile (Historique en icône, sans devise ni rôle ; avec H24, sans e-mail), resserrée, et le logo n'est
   plus écrasé ; avec H24, si la zone du compte ne tient toujours pas (moins de 360 px, bouton d'administration), elle passe sous le
   logo, au besoin sur deux lignes, au lieu de déborder. Au-delà de 760 px : rien ne change. */
@media (max-width: 760px) {
  .entete .sous-titre, .entete .badge, .libelle-historique { display: none; }
  .interrupteur:not([hidden]) ~ .utilisateur .utilisateur-email { display: none; }
  .btn-historique { padding: var(--space-1) var(--space-2); }
  .entete-marque { flex-shrink: 0; }
  .entete-utilisateur { gap: var(--space-2); margin-inline-start: auto; justify-content: flex-end; }
  .interrupteur { gap: var(--space-1); }
  #btn-deconnexion { padding-inline: var(--space-2); }
  .entete:has(.interrupteur:not([hidden])), .entete:has(.interrupteur:not([hidden])) .entete-utilisateur { flex-wrap: wrap; row-gap: var(--space-2); }
  @media (max-width: 600px) {
    .vue-chat.avec-historique .entete, .vue-chat.avec-historique .entete-marque, .entete-utilisateur { column-gap: var(--space-1); }
  }
}
/* UX-CHAT-CLOSE : barre d'actions sous une réponse d'ORENIQ enregistrée (Copier, 👍, 👎, « … », Convertir en PDF) : discrète, sous
   l'heure, retour à la ligne propre, zones tactiles de 40 px (44 px sur écran tactile), couleurs de la palette (clair et sombre). */
.actions-message { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.action-reponse {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 40px; min-height: 40px; padding: 0 var(--space-2);
  background: transparent; color: var(--ink-muted); border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-size: 14px; line-height: 20px; cursor: pointer;
}
.action-reponse:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.action-reponse:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.action-reponse:disabled { opacity: 0.6; cursor: progress; }
.action-reponse[aria-pressed="true"], .action-reponse.fait { color: var(--accent-text); background: var(--surface); border-color: var(--bordure-interactive); }
.action-pdf { color: var(--ink); border-color: var(--bordure-interactive); }
.actions-plus { position: relative; display: inline-flex; }
.actions-menu {
  position: absolute; z-index: 15; bottom: calc(100% + var(--space-1)); left: 0; min-width: 12rem; max-width: calc(100vw - 2rem);
  display: flex; flex-direction: column; padding: var(--space-1); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.actions-menu.vers-le-bas { bottom: auto; top: calc(100% + var(--space-1)); }
.actions-menu[hidden] { display: none; }
.action-menu-item { justify-content: flex-start; width: 100%; color: var(--ink); white-space: nowrap; }
.actions-etat { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.actions-etat:empty { display: none; }
.copie-tampon { position: fixed; top: 0; left: -10000px; opacity: 0; }
@media (pointer: coarse) { .action-reponse { min-width: 44px; min-height: 44px; } }