/* SAM en ligne · même charte que Prédication : blanc, gris, charbon, serif italique d'accent.
   Chargé en dernier : il remappe les variables des anciennes feuilles de style, puis affine les composants.
   Aucune police ni ressource externe (RGPD). */
:root {
  --bg: #111111; --surface: #1b1b1b; --fg: #f1f1f0; --mute: #a1a1a1; --line: #2a2a2a; --btn-fg: #111111;
  --sans: "Inter", "Helvetica Neue", -apple-system, system-ui, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  /* variables historiques */
  --primary-color: var(--fg); --accent-color: var(--fg);
  --bg-dark: var(--bg); --bg-darker: var(--bg); --border-dark: var(--line);
}
body.day-theme {
  --bg: #ffffff; --surface: #f5f5f4; --fg: #161616; --mute: #6e6e6e; --line: #e8e8e6; --btn-fg: #ffffff;
}

body { font-family: var(--sans); font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--fg); padding-top: 0; -webkit-font-smoothing: antialiased; }
a { color: var(--fg); }
.container { max-width: 760px; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; padding: clamp(36px, 8vw, 80px) 20px 40px; }
body.day-theme .container { box-shadow: none; }

/* En-tête */
.header { background: transparent; border: 0; padding: 0; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--fg); border-radius: 999px; padding: 9px 18px; font-size: 14px; }
.pill .logo-icon { width: 14px; height: 14px; flex: none; }
.header h1 { display: block; font-weight: 500; font-size: clamp(34px, 7.2vw, 60px); line-height: 1.08; letter-spacing: -0.035em; margin: 26px 0 0; color: var(--fg); }
.header h1 em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: -0.02em; line-height: 1.05; }
.header p { color: var(--mute); opacity: 1; max-width: 560px; margin: 20px auto 0; font-size: clamp(15px, 2.6vw, 17px); }
.how-it-works-btn { margin: 16px auto 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 2px 0; color: var(--mute); font: inherit; font-size: 14px; cursor: pointer; display: inline-block; box-shadow: none; }
.how-it-works-btn:hover { color: var(--fg); border-color: var(--fg); background: none; transform: none; }
.how-it-works-btn .info-icon { display: none; }

.content { background: transparent; padding: 0; margin-top: 40px; }

/* Onglets en pilules */
.tab-buttons { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 0; border-radius: 999px; margin: 0 auto 28px; }
.content > .tab-buttons { display: flex; width: fit-content; }
.tab-button { padding: 9px 20px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 400; color: var(--mute); opacity: 1; background: transparent; gap: 8px; }
.tab-button:hover { color: var(--fg); }
.tab-button.active { background: var(--fg); color: var(--btn-fg); border: 0; }
.tab-icon { width: 16px; height: 16px; }
.badge-augmented { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 400; }
.new-star { display: none; }

/* Champ de saisie : carte comme sur Prédication */
.form-group label, label { font-weight: 400; color: var(--mute); font-size: 13px; margin-bottom: 8px; }
textarea, input[type="text"], input[type="search"], input[type="number"], select {
  background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 20px; font: 16px/1.65 var(--sans); padding: 18px 20px; outline: 0; box-shadow: none; transition: border-color .2s;
}
textarea { width: 100%; min-height: 200px; resize: vertical; }
input[type="text"], input[type="search"] { width: 100%; border-radius: 14px; padding: 13px 16px; }
textarea:focus, input[type="text"]:focus, input[type="search"]:focus { border-color: var(--fg); box-shadow: none; }
textarea::placeholder, input::placeholder { color: var(--mute); opacity: 1; }
.help-text { color: var(--mute); opacity: 1; font-size: 13px; }

/* Mode de résumé */
.parameters { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 4px 0 22px; }
.parameters h3 { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--mute); font-weight: 400; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.section-icon { width: 14px; height: 14px; }
.quality-preset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.preset-button { flex-direction: column; gap: 4px; padding: 14px 12px; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 16px; font: inherit; font-size: 15px; font-weight: 500; transform: none; }
.preset-button:hover { border-color: var(--fg); color: var(--fg); transform: none; }
.preset-button.active, body.day-theme .preset-button.active { background: var(--fg); color: var(--btn-fg); border-color: var(--fg); }
.preset-icon { width: 16px; height: 16px; }
.preset-description { display: block; font-size: 12px; font-weight: 400; opacity: .75; line-height: 1.35; }

/* Boutons principaux */
.submit-button, body.day-theme .submit-button, .secondary-button {
  width: auto; min-width: 220px; margin: 0 auto; padding: 14px 28px; background: var(--fg); color: var(--btn-fg); border: 0; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: none;
}
.submit-button:hover, .secondary-button:hover { opacity: .85; transform: none; background: var(--fg); box-shadow: none; }
.submit-icon, .button-icon { width: 16px; height: 16px; }
.secondary-button { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.secondary-button:hover { background: transparent; border-color: var(--fg); opacity: 1; }

/* Chargement, erreur */
.spinner { border-color: var(--line); border-top-color: var(--fg); }
.loading p { color: var(--mute); }
.error, body.day-theme .error { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 14px; }
.error-icon { color: var(--fg); }

/* Résultats */
.result { background: transparent; border: 1px solid var(--line); border-radius: 20px; padding: 24px; margin-top: 32px; }
.result h3 { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--mute); font-weight: 400; margin: 0; }
.result-header { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 18px; }
.summary-sentence { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 0; margin: 0; transform: none; }
.summary-sentence:last-child { border-bottom: 0; }
.summary-sentence:hover { transform: none; }
.sentence-number { color: var(--mute); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; }
.copy-button, .copy-button.success, body.day-theme .copy-button.success { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); padding: 6px 14px; font: inherit; font-size: 13px; }
.copy-button:hover { border-color: var(--fg); background: transparent; }
.stats { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 20px; }
.stat-item { background: var(--bg); border: 0; border-radius: 0; padding: 14px 16px; text-align: left; transform: none; }
.stat-item:hover { transform: none; }
.stat-value { font-family: var(--sans); font-size: 22px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--mute); opacity: 1; font-size: 12px; margin: 0 0 2px; order: -1; }
.stat-item { display: flex; flex-direction: column; }

/* Avis */
.feedback-widget { border-top: 1px solid var(--line); }
.feedback-label, .feedback-thanks { color: var(--mute); }
.feedback-btn { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); }
.feedback-btn:hover { border-color: var(--fg); background: transparent; }
.feedback-reason { background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 12px; }

/* Recherche sémantique (RAG) */
.rag-step, .rag-step.active { background: transparent; border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: none; }
.rag-workflow { gap: 18px; }
.step-title { font-size: 18px; font-weight: 500; gap: 12px; color: var(--fg); }
.step-number, .rag-step.active .step-number { background: var(--surface); color: var(--fg); border: 0; box-shadow: none; width: 30px; height: 30px; font-size: 14px; font-family: var(--serif); font-style: italic; }
.step-description { color: var(--mute); opacity: 1; font-size: 14px; }
.index-info, .info-card { background: transparent; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.info-card h4 { color: var(--mute); font-weight: 400; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.info-stat .stat-value { color: var(--fg); font-family: var(--sans); }
.rag-answer-card { background: transparent; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; transform: none; }
.rag-answer-card:hover { border-color: var(--fg); transform: none; box-shadow: none; }
.rag-answer-card::before { display: none; }
.rank-badge, .rank-badge.top-1, .rank-badge.top-2, .rank-badge.top-3 { background: var(--surface); color: var(--fg); border: 0; box-shadow: none; }
.confidence-bar, .score-bar { background: var(--surface); border-radius: 999px; }
.confidence-fill, .confidence-fill.high, .confidence-fill.medium, .confidence-fill.low, .confidence-fill.confidence-high, .confidence-fill.confidence-medium, .confidence-fill.confidence-low,
.score-bar-fill, .score-bar-fill.semantic, .score-bar-fill.lexical { background: var(--fg); }
.confidence-value, .score-value, .answer-metadata, .metadata-item, .score-label, .confidence-label { color: var(--mute); }
.query-mode, .query-mode.factuelle, .query-mode.thematique { background: var(--surface); color: var(--fg); border: 0; border-radius: 999px; }
.no-results { color: var(--mute); }

/* Zone de dépôt du fichier à indexer */
.file-drop-zone { background: transparent; border: 1px dashed var(--line); border-radius: 20px; color: var(--mute); }
.file-drop-zone:hover, .file-drop-zone.drag-over { border-color: var(--fg); background: var(--surface); }
.file-drop-zone.has-file { border-style: solid; }
.upload-icon, .file-icon-small { color: var(--mute); }
.drop-zone-title { color: var(--fg); }
.drop-zone-subtitle { color: var(--mute); }
.browse-link { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.file-info { color: var(--fg); }
.remove-file { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); }

/* Fenêtre « Pourquoi SAM est différent ? » */
.modal-overlay { background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); }
.modal-content { background: var(--bg); border: 1px solid var(--line); border-radius: 24px; box-shadow: none; color: var(--fg); }
.modal-header h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2em; color: var(--fg); }
.modal-header p { color: var(--mute); }
.close-modal-btn { background: var(--surface); color: var(--fg); border: 0; border-radius: 999px; }
.feature-card { background: transparent; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; transform: none; }
.feature-card:hover { border-color: var(--fg); transform: none; box-shadow: none; }
.feature-icon { color: var(--fg); }
.feature-card h3 { color: var(--fg); }
.feature-card p { color: var(--mute); }

/* Pied de page */
.footer { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 40px auto 0; max-width: 760px; padding: 28px 20px 48px; color: var(--mute); text-align: left; }
.footer p, .footer-content p { color: var(--mute); font-size: 13px; line-height: 1.6; }
.footer strong { color: var(--fg); font-weight: 500; }
.footer a { color: var(--fg); }
.footer-content { max-width: none; }
.beta-ribbon { display: none !important; }

@media (max-width: 640px) {
  .quality-preset { grid-template-columns: 1fr; }
  .tab-buttons { width: 100%; }
  .tab-button { flex: 1; justify-content: center; padding: 9px 10px; }
  .submit-button { width: 100%; }
}

/* Neutralise les décors de presets.css */
.preset-button, .preset-button:hover, .preset-button.active:hover { min-height: 0; padding: 14px 12px; transform: none; }
.preset-button.active::after, .preset-button.recommended::after, .preset-button[data-tooltip]::before { display: none !important; }
.preset-button.active .preset-description { color: inherit; font-weight: 400; }
.preset-icon { width: 16px; height: 16px; margin: 0; filter: none; }
.preset-description { margin-top: 0; font-size: 12px; }
/* Liens du pied de page (certains ont un style en ligne) */
.footer-credits a { margin: 6px 0 0 !important; max-width: none !important; display: inline-flex !important; }
.footer-credits a + a { margin-left: 18px !important; }

/* Finitions */
.result-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sentence-number { font-size: 1.25em; margin-bottom: 2px; }
.step-number, .rag-step.active .step-number { opacity: 1; color: var(--fg); }
.feedback-btn { filter: grayscale(1); }
.modal-header, .modal-header * { border-color: var(--line); }
.modal-header { border-bottom: 1px solid var(--line); }
.confidence-fill, .score-bar-fill { opacity: 1; }
.index-info { border: 0; border-radius: 0; }

/* Mobile */
html, body { overflow-x: hidden; }
img, svg, textarea, input { max-width: 100%; }
@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .tab-buttons { flex-direction: row; }
  .header h1 { font-size: clamp(34px, 9vw, 52px); }
  .header p { font-size: 15px; }
  .quality-preset { display: grid; grid-template-columns: 1fr; }
  .tab-button { font-size: 13px; padding: 9px 8px; white-space: normal; text-align: center; }
  .footer { padding-left: 16px; padding-right: 16px; }
}
.tab-icon { flex: none; }