/* rendu-web.css - LE RENDU WEB (CDC_RENDU) : la carte d'une réponse qui livre des fichiers, la même dans l'onglet
   Fichiers, et le visionneur. Tout passe par les jetons de la page (--fond, --surface, --carte, --texte, --doux, --bord,
   --accent) : le thème de Poevai (clair, sombre, système) s'applique sans règle de plus. */

.msg.ia.rw-bulle { max-width: min(680px, 100%); white-space: normal; }
.rw-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.msg.ia .rw-carte { margin-top: 2px; }
.rw-carte.rw-plusieurs { grid-template-columns: minmax(0, 1fr); }
.rw-carte.rw-plusieurs .rw-miniatures { max-width: none; }
.rw-corps { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rw-corps > p { margin: 0; white-space: pre-wrap; }

/* ── Les miniatures ── */
.rw-miniatures { display: flex; flex-wrap: wrap; gap: 8px; max-width: 332px; }
.rw-fig { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.rw-fig figcaption { font-size: 11px; color: var(--doux); }
.rw-apercu { position: relative; width: 100px; height: 80px; padding: 0; overflow: hidden; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); cursor: zoom-in; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.rw-apercu:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .25); border-color: color-mix(in srgb, var(--texte) 30%, var(--bord)); }
.rw-apercu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rw-scene { transform-origin: 0 0; pointer-events: none; }
.rw-scene .rw-cadre { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.rw-voile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, #000 38%, transparent); color: #fff; opacity: 0; transition: opacity .15s ease; }
.rw-apercu:hover .rw-voile, .rw-apercu:focus-visible .rw-voile { opacity: 1; }
.rw-ic { display: inline-flex; line-height: 0; }
/* Un mini tableau, les premières lignes : dessinés petit, dans le cadre même. */
.rw-mini { position: absolute; inset: 0; margin: 0; padding: 6px; overflow: hidden; text-align: start; background: var(--surface); color: var(--texte); }
.rw-apercu.rw-sorte-tableau, .rw-apercu.rw-sorte-texte { background: var(--surface); }
.rw-mini .rw-table { font-size: 6.5px; line-height: 1.35; }
.rw-mini .rw-table th, .rw-mini .rw-table td { padding: 1px 3px; max-width: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rw-mini.rw-lignes { font: 6.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; color: var(--doux); }

/* ── Les fichiers et leurs actions ── */
.rw-fichiers { display: flex; flex-direction: column; gap: 8px; }
.rw-fichier { display: flex; flex-direction: column; gap: 10px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 10px; background: transparent; }
.rw-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rw-nom { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rw-nom b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-meta { font-size: 11.5px; color: var(--doux); overflow: hidden; text-overflow: ellipsis; }
.rw-demande { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.rw-actions { display: flex; gap: 6px; flex-shrink: 0; }
.rw-bouton { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--bord); border-radius: 8px; background: transparent; color: var(--texte); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.rw-bouton:hover { border-color: color-mix(in srgb, var(--texte) 30%, var(--bord)); }
.rw-bouton.rw-principal { background: var(--accent); color: var(--accent-texte); border-color: transparent; font-weight: 600; }
.rw-bouton.rw-principal:hover { opacity: .9; }
.rw-bouton.rw-icone { width: 30px; padding: 0; justify-content: center; }

/* ── La vue Code du visionneur : coloration, numéros de ligne, un onglet par fichier ── */
:root {
  --rw-c-balise: #1d4ed8; --rw-c-attribut: #7c3aed; --rw-c-valeur: #047857; --rw-c-chaine: #047857; --rw-c-commentaire: #6b7280;
  --rw-c-nombre: #b45309; --rw-c-mot-cle: #be185d; --rw-c-propriete: #0e7490; --rw-c-selecteur: #1d4ed8; --rw-c-ponct: #64748b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rw-c-balise: #7aa2f7; --rw-c-attribut: #bb9af7; --rw-c-valeur: #9ece6a; --rw-c-chaine: #9ece6a; --rw-c-commentaire: #7f8594;
    --rw-c-nombre: #ff9e64; --rw-c-mot-cle: #f7768e; --rw-c-propriete: #7dcfff; --rw-c-selecteur: #7aa2f7; --rw-c-ponct: #9aa5b8;
  }
}
:root[data-theme="dark"] {
  --rw-c-balise: #7aa2f7; --rw-c-attribut: #bb9af7; --rw-c-valeur: #9ece6a; --rw-c-chaine: #9ece6a; --rw-c-commentaire: #7f8594;
  --rw-c-nombre: #ff9e64; --rw-c-mot-cle: #f7768e; --rw-c-propriete: #7dcfff; --rw-c-selecteur: #7aa2f7; --rw-c-ponct: #9aa5b8;
}
.rw-code-cadre { width: 100%; max-width: 1100px; min-height: 0; display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.rw-onglets-code { display: flex; gap: 4px; flex-wrap: wrap; }
.rw-onglet-code { height: 28px; padding: 0 11px; border: 1px solid var(--bord); border-radius: 8px; background: transparent; color: var(--doux); font: 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.rw-onglet-code[aria-selected="true"] { background: var(--surface); color: var(--texte); border-color: color-mix(in srgb, var(--texte) 25%, var(--bord)); }
.rw-code-vue { flex: 1; min-height: 0; display: flex; align-items: flex-start; padding: 0; overflow: auto; }
.rw-marge, .rw-source { margin: 0; padding: 14px 12px; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; tab-size: 2; }
.rw-marge { position: sticky; left: 0; text-align: end; color: color-mix(in srgb, var(--doux) 70%, transparent); background: var(--surface); border-right: 1px solid var(--bord); user-select: none; min-width: 3.2em; }
.rw-source { flex: 1; color: var(--texte); }
.rw-t-balise { color: var(--rw-c-balise); } .rw-t-attribut { color: var(--rw-c-attribut); } .rw-t-valeur { color: var(--rw-c-valeur); }
.rw-t-chaine { color: var(--rw-c-chaine); } .rw-t-commentaire { color: var(--rw-c-commentaire); font-style: italic; } .rw-t-nombre { color: var(--rw-c-nombre); }
.rw-t-mot-cle { color: var(--rw-c-mot-cle); } .rw-t-propriete { color: var(--rw-c-propriete); } .rw-t-selecteur { color: var(--rw-c-selecteur); } .rw-t-ponct { color: var(--rw-c-ponct); }

/* ── Dans l'onglet Fichiers ── */
.rw-panneau { padding: 10px; border: 1px solid var(--bord); border-radius: 12px; background: var(--surface); }
.rw-panneau .rw-fichier { border: 0; padding: 0; }
.rw-panneau .rw-ligne { flex-direction: column; align-items: stretch; gap: 8px; }
.rw-panneau .rw-actions { flex-wrap: wrap; }
.rw-panneau .rw-carte { gap: 12px; }
#produits li:has(> .rw-panneau) { list-style: none; padding: 0; border: 0; background: transparent; }

/* ── Le visionneur : le navigateur intégré ── */
.rw-visionneur { width: min(1280px, calc(100vw - 32px)); height: calc(100vh - 32px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--bord); border-radius: 14px; background: var(--fond); color: var(--texte); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); }
.rw-visionneur:not([open]) { display: none; }
.rw-visionneur::backdrop { background: rgba(10, 10, 12, .55); backdrop-filter: blur(2px); }
.rw-barre { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--bord); background: var(--surface); flex-wrap: wrap; }
.rw-barre .rw-nom { flex: 1 1 160px; }
.rw-barre .rw-titre { font-size: 14px; }
.rw-segments { display: inline-flex; flex-shrink: 0; padding: 2px; gap: 2px; border: 1px solid var(--bord); border-radius: 9px; background: var(--fond); }
.rw-segments[hidden] { display: none; }
.rw-segment { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 32px; height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--doux); font: inherit; font-size: 12.5px; cursor: pointer; }
.rw-segment[aria-pressed="true"], .rw-segment[aria-selected="true"] { background: var(--carte); color: var(--texte); font-weight: 600; }
.rw-page { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--carte) 70%, var(--fond)); }
.rw-appareil { height: 100%; max-width: 100%; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .3); transition: width .2s ease; }
.rw-appareil .rw-cadre { width: 100%; height: 100%; border: 0; display: block; }
.rw-document { align-self: flex-start; color: var(--texte); margin: 0; max-width: 100%; padding: 14px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); overflow: auto; }
.rw-document.rw-lignes { font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.rw-table { border-collapse: collapse; font-size: 13px; }
.rw-table th { text-align: start; font-weight: 600; color: var(--doux); border-bottom: 1px solid var(--bord); padding: 6px 10px; }
.rw-table td { border-bottom: 1px solid color-mix(in srgb, var(--bord) 60%, transparent); padding: 6px 10px; }

.rw-document.rw-code-vue { padding: 0; align-self: stretch; max-width: none; }

@media (max-width: 640px) {
  .rw-ligne { flex-direction: column; align-items: stretch; }
  .rw-barre .rw-segments[role="group"] .rw-segment span:not(.rw-ic) { display: none; }
  .rw-visionneur { width: 100vw; height: 100vh; border-radius: 0; }
}